原生微信小程序图片预览功能组件封装抽离

简单 通用 多个地方复用 只需要传入图片数组 和当前要展示第几项的下标

支持：

　　1.全屏预览图片左右滑动切换

　　2.点击图片任意地方关闭预览

　　3.设置展示第几项图片

效果图：

这里默认点击第二张图 

 最终组件展示 默认展示第二张 左右滑动进行切换

注意组件接收的是数组字符串内容的线上图片地址

[htt/xxxxx.com,http.xxxxx.com]

1.component目录下创建组件 previewImage

previewImage.js

// component/previewImage/previewImage.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    imgArr: { // 图片数组
      type: Array,
      value: []
    },
    current: {// 当前默认展示第几项
      type: Number,
      value: 0
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    height: wx.getSystemInfoSync().windowHeight,
    indicatorDots: true,
    vertical: false,
    autoplay: false,
    interval: 2000,
    duration: 600
  },

  /**
   * 组件的方法列表
   */

  methods: {
    // 关闭弹窗组件
    imgEventx() {
      this.setData({
        imgArr: []
      })
    },
  },
  attached() {
    // console.log('666666')
    // console.log(this.properties.imgArr)
  }
})

previewImage.json

{
  "component": true,
  "usingComponents": {}
}

previewImage.wxml

if="{{imgArr.length}}">
  
    for="{{imgArr}}" wx:key="*this">
      
        
          
            
              
            
          
        
      
    
  

previewImage.wxss

.pre {
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background:#000000;
  z-index: 99;
  overflow: hidden;
  color: #ffffff;
}

.previewImage {
  height: 95%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: auto 0;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}
.images{
  height: 95%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.images image{
  width: 100%;
}

2.页面调用

1.先在调用的页面xxx.json进行组件注册

xxx.json

{
  "usingComponents": {
    "previewImage":"/component/previewImage/previewImage"
  },
  "navigationBarTitleText":"页面标题"
}

2.在使用的xxx.wxml进行调用

默认使用页面的xxx.js 中的 data对象中定义的 imgArr = [] 和current = 0

3.给当前你要预览的图片绑定事件

for="{{item.imageList}}" wx:key="index" wx:for-index="index">
          
            
          
        

4.给预览组件传递数据 展示图片

 imgArrEvent(e){
    const { indexs,current } = e.target.dataset 
    const { imageList } =  this.data.list[indexs] // 获取当前对象中的图片数组
    this.setData({
      current:current, // 默认展示第几项图片
      imgArr:imageList
    })
  },

我是马丁的车夫，欢迎转发收藏！