微信小程序仿淘宝banner详情点击图片预览有叉号关闭

微信小程序仿淘宝的banner详情点击图片预览时，通常会有一个叉号图标，用于关闭预览。这个叉号是一个功能按钮，点击后可以关闭图片预览界面。

实现这个功能的关键是在小程序中添加一个叉号图标，并为其绑定一个点击事件。当用户点击叉号图标时，触发点击事件的回调函数，通过该函数关闭图片预览界面。

代码示例：
1. 在wxml文件中添加叉号图标和图片预览组件：

<view>
  <!-- 叉号图标 -->
  <view class="close-icon" bindtap="closePreview"></view>
  <!-- 图片预览组件 -->
  <image class="preview-image" src="{{imageSrc}}" mode="aspectFit"></image>
</view>

2. 在wxss文件中对叉号图标和图片预览组件进行样式设置：

/* 叉号图标样式 */
.close-icon {
  width: 16px;
  height: 16px;
  background-image: url("close_icon.png");
  background-size: cover;
}

/* 图片预览组件样式 */
.preview-image {
  width: 100%;
  height: 100%;
}

3. 在js文件中编写点击事件的回调函数，用于关闭图片预览界面：

Page({
  data: {
    imageSrc: 'preview_image.png'
  },
  closePreview: function() {
    wx.navigateBack({
      delta: 1 // 返回上一级页面
    })
  }
})

在上述代码中，closePreview函数使用wx.navigateBack方法返回上一级页面，从而实现关闭图片预览的功能。当用户点击叉号图标时，该函数被调用，预览界面被关闭。

这样，就实现了仿淘宝的banner详情点击图片预览有叉号关闭的功能。用户可以点击叉号图标来关闭图片预览界面。