博客

微信小程序 素材类型（视频图片混在一起）预览图片和视频

//  1.wx.js

//  （1）、处理下返回的数据 如果你返回的数据可以直接使用 这步直接忽略
  getarticleList() {
    wx.showLoading()
    this.setData({
      list: []
    })
    let params = {
     // 这里写你的请求参数
    }
    $api.getAtcList(params).then(res => {
      wx.hideLoading()
      if (res.errcode == 0) {
        let loadinglist = res.data.list ? res.data.list.map(it => {
          let allarr = [...it.videos, ...it.images]
          let preview = []
         //  处理图片
          let imgurls = it.images.map(it1 => {
            return {
              urls: it1,
              type: 'image',
              id: it.id,//注意 这里是外层的it的id
              file: allarr //先将要循环展示的**图片**放在一个数组里
            }
          })

         //  处理视频
          let videourls = it.videos.map(it1 => {
            return {
              urls: it1,
              type: 'video',
              id: it.id,//注意 这里是外层的it的id
              file: allarr //先将要循环展示的**视频**放在一个数组里
            }
          })
          preview = [...videourls, ...imgurls]


       //  这里处理循环的视频和图片 数组file
          let file = []
          allarr.forEach(it => {
            file.push(it)
          })
          return {
            ...it,
            file: file, //循环的视频图片
            preview: preview, // 预览要用的数组
          }
        }) : []
        this.setData({
          list: [...this.data.list, ...loadinglist],
        })
      }
    })
  },
// （2）预览事件
  preview(event) {
    console.log(event)
    let maparr = event.currentTarget.dataset.src.file
    let index = event.currentTarget.dataset.index
    let previewarr = []
    maparr.map(it => {
      previewarr.push({
        url: it,
        type: 'bmp,jpg,png,tif,gif,pcx,tga,exif,fpx,svg,psd,cdr,pcd,dxf,ufo,eps 
        ,ai,raw,wmf, jpeg'.includes(it.split('.').slice(-1)) ? 'image' : 'video'
        // type 判断是图片还是视频
      })
    })
    // 既有视频又有图片用这个
    wx.previewMedia({
      sources: previewarr, 
      // 官方文档 : 素材展示列表 是个数组对象 一个url链接 一个type 判断这是视频还是图片
      // 接收image 和 video 所以处理数据时 最好给个type 指定 image 或者 video
      current: index
      // 当前显示的资源序号
    })
  },







// 2.wx.wxml
// 页面渲染
<view wx:for="{{list}}" wx:key="id">
   <view class="sucai_box">
      <view wx:for="{{item.preview}}" wx:key="item" class="sucai_flex" bindtap="preview" data-src="{{item}}" data-index="{{index}}">
        <video wx:if="{{item.type == 'video'}}" class="material_img" src="{{item.urls}}"></video>
        <image wx:else class="material_img" src="{{item.urls}}"></image>
      </view>
   </view>
</view>




// 3. wx.wxss
// 页面样式（按自己的排版写）
.sucai_box {
  margin-top: 16rpx;
}

.sucai_flex {
  display: inline-block; // 重点是设置view 为 inline-block
  width: 30%;
  height: 210rpx;
  margin: 10rpx 8rpx 0 14rpx;
}

.material_img {
  width: 100%;
  height: 100%;
  border-radius: 8rpx;
}

okk