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

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

支持：

　　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

<view class="pre" style="height:{{height+'px'}}" catchtouchmove="preventTouchMove" wx:if="{{imgArr.length}}">
  <swiper indicator-dots="{{indicatorDots}}" style="height:{{height+'px'}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" current="{{current}}" indicator-color="#8b8c8f" indicator-active-color="#ffffff" circular="{{true}}">
    <block wx:for="{{imgArr}}" wx:key="*this">
      <swiper-item>
        <view style="width: 100%;height: 100%;position: relative;">
          <view class=" previewImage" bindtap="imgEventx">
            <view class="images">
              <image src="{{item}}" mode="widthFix"></image>
            </view>
          </view>
        </view>
      </swiper-item>
    </block>
  </swiper>
</view>

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

<previewImage imgArr="{{imgArr}}" current="{{current}}"></previewImage>

 

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

注意这里的 indexs 绑定的是最外层的循环 下标索引

<block wx:for="{{item.imageList}}" wx:key="index" wx:for-index="index">
          <view >
            <image mode="aspectFill"  bindtap="imgArrEvent" data-indexs="{{indexs}}" data-current="{{index}}"  src="{{item}}"></image>
          </view>
        </block>

 

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

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

 

 

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