微信小程序图片预览组件使用整理(一)可缩放拖动

原创
2021/11/03 19:39
阅读数 3.1K

一、微信小程序图片预览组件使用整理

说明,微信小程序自带图片预览功能;预览图片或者视频,都是新窗口打开,并且阻断原有页面的音频播放等。

wx.previewImage 在新页面中全屏预览图片
wx.previewMedia 预览图片和视频

 

二、自定义图片预览组件,展示图片处理

原文来自同行封装:

https://blog.csdn.net/qq_42699996/article/details/106492330

1.previewImg.wxml

<view class="preview_box" wx:if="{{previewHideStatus}}" style="top:{{preview_box_top}}" catchtouchmove='stopPageScroll'>
  <view class="totalimg">{{imgindex}}/{{previewImgList.length}}</view>
  <view class="preview_box1" style="left:{{left}}" bindtap="jingzhi">
    <block wx:for="{{previewImgList}}" wx:key="key">
      <view class="img_box">
        <view bindtouchstart='touchStart' bindtouchmove='touchMove' bindtouchend='touchEnd'>
          <movable-area scale-area>
            <movable-view direction="all" animation catchscale="onScale" scale scale-min="1" scale-max="5" scale-value="{{scale}}">
              <image src="{{item}}" style="width:100%;" mode="widthFix"></image>
            </movable-view>
          </movable-area>
        </view>
      </view>
    </block>
  </view>
</view>

2.previewImg.css

page{
    height: 100%;
  }
  .preview_box{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #000;
    white-space: nowrap;
    transition: all .3s;
    height: 100%;
    z-index: 99999;
  }
  .preview_box>.totalimg{
    color: #fff;
    position: absolute;
    z-index: 999;
    top: 10px;
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .preview_box>.preview_box1{
    height: 100%;
    position: relative;
  }
  .img_box{
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
  }
  .img_box>view{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-items: center;
  }
  movable-view {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    color: #fff;
  }
  
  movable-area {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  

3.previewImg.js

var that;
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    previewImgList: {
      type: Array,
      value: false
    },
    previewImg: {
      type: null,
      value: false
    },
  },
  attached: function () {
    that = this;
  },
  /**
   * 组件的初始数据
   */
  data: {
    preview_box_top: 0,
    left: '0px;',
    touchS: [0, 0],
    touchE: [0, 0],
    index: 0,
    imgindex:0,
    previewHideStatus:false,
    scale: 1,
    scaleObj:{
      scale:1,
      x:0,
      y:0,
      yes:true
    },
    touchStartTime: 0,   // 触摸开始时间
    touchEndTime: 0,     // 触摸结束时间
    lastTapTime: 0,  // 最后一次单击事件点击发生时间
    lastTapTimeoutFunc: null, // 单击事件点击后要触发的函数
  },
  /**
   * 组件的方法列表
   */
  methods: {
    jingzhi(e) { 
      let diffTouch = this.data.touchEndTime - this.data.touchStartTime;
      let curTime = e.timeStamp;
      let lastTime = this.data.lastTapDiffTime;
      this.data.lastTapDiffTime = curTime;

      //两次点击间隔小于300ms, 认为是双击
      let diff = curTime - lastTime;
      if (diff < 300) {
        console.log("double tap")
        clearTimeout(this.data.lastTapTimeoutFunc); // 成功触发双击事件时,取消单击事件的执行
        if(that.data.scale == 1){
          that.setData({
            scale:3
          })
        }else{
          that.setData({
            scale:1
          })
        }
      } else {
        this.data.lastTapTimeoutFunc = setTimeout(function () {
          console.log("single tap")
          if(that.data.scaleObj.yes){
            that.setData({ preview_box_top: '100%' })
          }
        }, 300);
      }
    },
    configqxClick(e) { this.setData({ scopeWritePhotosAlbum: e.detail }) },
    touchStart: function (e) {
      this.data.touchStartTime = e.timeStamp //时间点
      let sx = e.touches[0].pageX
      let sy = e.touches[0].pageY
      this.data.touchS = [sx, sy];
    },
    touchMove: function (e) {
      let start = this.data.touchS;
      let sx = e.touches[0].pageX;
      let sy = e.touches[0].pageY;
      this.data.touchE = [sx, sy];
    },
    touchEnd: function (e) {
      this.data.touchEndTime = e.timeStamp //时间点
      let start = this.data.touchS
      let end = this.data.touchE
      let scaleObj = this.data.scaleObj
      //如果((start[0] < end[0] - 50) && (scaleObj.scale==1&&scaleObj.x==0&&scaleObj.y==0)) //左滑动
      //如果((start[0] > end[0] + 50) && (scaleObj.scale==1&&scaleObj.x==0&&scaleObj.y==0)) //右滑动
      if(scaleObj.yes){
        if(end[0] == 0){
          console.log('点击')
        }else if((start[0] < end[0] - 50) && (scaleObj.scale==1&&scaleObj.x==0&&scaleObj.y==0)){
          if (this.data.index !== 0) {
            this.data.index -= 1;
            this.data.imgindex -=1;
            this.setData({ index: this.data.index, left: '-' + this.data.index + '00%;transition: all .5s;', imgindex: this.data.imgindex });
          }
        }else if((start[0] > end[0] + 50) && (scaleObj.scale==1&&scaleObj.x==0&&scaleObj.y==0)){
          if (this.data.index !== this.data.previewImgList.length - 1) {
            this.data.index += 1;
            this.data.imgindex += 1;
            this.setData({ index: this.data.index, left: '-' + this.data.index + '00%;transition: all .5s;', imgindex: this.data.imgindex });
          }
        }else{
          console.log('下滑/上滑');
          this.setData({ preview_box_top: '100%' })
        }
        this.data.touchE = [0, 0];
      }

      setTimeout(()=>{
        if(this.data.scaleObj.x == 0 && this.data.scaleObj.y == 0 && this.data.scaleObj.scale == 1){
          console.log('yes is true');
          this.data.scaleObj.yes = true;
        }
      },500)
    },
    showPreview() {
      this.setData({ previewHideStatus: true, preview_box_top: 0 })
    },
    hidePreview() {
      this.setData({ previewHideStatus: false, preview_box_top: 0 })
    },
    onScale(e) {
      this.data.scaleObj = {
        scale:e.detail.scale,
        x:e.detail.x,
        y:e.detail.y,
        yes:false
      }
    },
    stopPageScroll() { return },
  },
  observers: {
    'previewImgList': function (arr) {
      console.log(arr)
    },
    'previewImg':function(img){
      this.data.previewImgList.map((item,index)=>{
        if(item == img){
          let imgindex = index;
          imgindex+=1;
          this.setData({ index: index, imgindex: imgindex, left: '-'+index+'00%;' })
        }
      })
    }
  },
})

4.previewImg.json

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

三、自定义组件使用案例

1.json配置

{
  "usingComponents": {
    "previewImg": "../../../comps/previewImg"
  }
}

2.wxml

<image src="{{imgList[0]}}" catchtap="openpreviewImg" mode="widthFix"></image>
<previewImg id="previewComponent" previewImgList="{{imgList}}" previewImg="{{defImg}}" />

3.js

    openpreviewImg() {
        this.selectComponent("#previewComponent").showPreview();
        this.setData({
            defImg: this.data.imgList[0]
        })
    },

展示效果:

更多:

 微信小程序音频(三)使用BackgroundAudioManager 播放音频并展示进度

 微信小程序音频处理audio -自定义进度控制

 微信小程序音频处理audio 使用整理

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部