微信小程序缩放图片与滑动图片：movable-view与swiper一起使用所产生的手势冲突的基本解决方案（操作过于频繁还是会出现问题，基本的使用是没有问题的）

曦和百里

已于 2023-05-19 08:56:17 修改

阅读量2.3w

点赞数 2

文章标签：微信小程序 javascript 前端

于 2023-05-19 08:43:55 首次发布

本文链接：https://blog.csdn.net/weixin_44647865/article/details/130758902

版权

1.一些参数和需要用到的方法js代码注释都有了，只要复制过去看就好了
2.怎么解决这个手势冲突呢，我采用的是mina-touch插件，去监听这两种手势，当双指在的时候，长按事件就不触发，滑动的时候长按事件也要阻止，因为在不停的滑动的时候，也会长按，大概就是这么一个思路。
3.有疑问的同学欢迎留言，看到后回复
4.ps:关于百度小程序的我也写过了，双指和滑动事件冲突掉了，然后去询问百度官方的也暂时没有解决方案，自己手写的兼容性也不是很好
demo

//html模块
<view>
  <call-sall isShowCallSale="{{isShowCallSale}}" bind:hidenAllDialog="hidenAllDialog" phoneNumber="{{phoneNumber}}" extNumber="{{extNumber}}"></call-sall>
  <view class="preView_image" bindtap="closePreview" wx:if="{{isShowPreviewDetail}}" bindtouchstart="touch1.start"
  bindtouchmove="touch1.move" bindtouchend="touch1.end"  bindtouchcancel="touch1.cancel" bindmultipointStart="touch1.multipointStart" bindmultipointEnd="touch1.multipointEnd" bindlongTap="touch1.longTap" >
    <view class="preView_image_head">
      <view class="left_icon" bindtap="closePreview">
        <image style="width: 26rpx;height: 26rpx;" src="https://szimg.xhj.com/xhj/images/2023-04-20/cbf044b5-71a2-4ab7-9a64-872f0add918e.png"></image>
      </view>
      <view class="center_title">户型图{{imgUrlsIndex+1}}/{{imgUrlsPreview.length}}</view>
      <view></view>
    </view>
    <swiper class="preview_image_swiper" current="{{imgUrlsIndex}}" bindchange="previewBindChange">
      <swiper-item wx:for="{{imgUrlsPreview}}" wx:key="index" class="preview_image_swiper_item" circular='true'>
        <movable-area style="width: 100%;height: 100%;" scale-area="true" catchtap="doubleTap" >
            <movable-view style="width: 100%;height: 100%;" direction="all" scale="true" out-of-bounds="true"  scale-max="2" scale-min="0.5" scale-value="{{scaleValue}}">
              <image src="{{item}}" class="preView_image_item"  preview="false" mode="aspectFit" show-menu-by-longpress="{{isSaveImage}}"  />
            </movable-view>
        </movable-area>
      </swiper-item>
    </swiper>
  </view>
</view>

js代码模块
// components/previewImage/index.js
import MinaTouch from 'mina-touch'; //引入mina-touch
Component({
  /**
   * 组件的属性列表
   */
  properties: {
      // 是否显示该组件
      isShowPreviewDetail: {
        // 属性名
        type: Boolean,
        // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
        value:true,
        // 属性初始值（必填）
    },
    // 当前图片索引
    imgUrlsIndex:{
        type:Number,
        value:0
    },
    // 展示图片数组
    imgUrlsPreview:{
        type:Array,
        value:[]
    },
    // 是否显示数组
    weiliaoIsShow:{
        type:Boolean,
        value:true
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    // 是否保存图片,一般来说是直接就可以保存的
    isSaveImage:true,
    // 双击定义扩大倍数
    scaleValue:1,
    // 最后一次点击时间
    lastTapTime: 0,
    // 是否放大
    isScale:false
  },
  /**
   * 组件的方法列表
   */
  // 组件的生命周期
  created(){
    let that=this
    new MinaTouch(this,'touch1',{
       //会创建this.touch1指向实例对象
       touchStart: function () {
        that.setData({
          isSaveImage:true
         })
       },
       touchMove: function () {
        // console.log('touchMove')
        that.setData({
          isSaveImage:false
         })
       },
       touchEnd: function () {
        that.setData({
          isSaveImage:true
         })
       },
       touchCancel: function () {
       },
       multipointStart: function () {
         that.setData({
          isSaveImage:false
         })
       }, //一个手指以上触摸屏幕触发
       multipointEnd: function () {
        that.setData({
          isSaveImage:true
         })
       }, //当手指离开，屏幕只剩一个手指或零个手指触发(一开始只有一根手指也会触发)
       tap: function () {
         console.log('Tap');
        //  that.closePreview()
       }, //点按触发，覆盖下方3个点击事件，doubleTap时触发2次
       doubleTap: function () {
         console.log('doubleTap');
       }, //双击屏幕触发
       longTap: function () {
            that.setData({
            isSaveImage:true
            })
       }, //长按屏幕750ms触发
       singleTap: function () {
         console.log('singleTap');
       }, //单击屏幕触发，包括长按
       rotate: function (evt) {
         //evt.angle代表两个手指旋转的角度
        //  console.log('rotate:' + evt.angle);
       },
       pinch: function (evt) {
         //evt.scale代表两个手指缩放的比例
        //  console.log('pinch:' + evt.zoom);
       },
       pressMove: function (evt) {

         that.pressView(evt.deltaX);
       },
    })
  },
  methods: {
    pressView(deltaX) {
      let translateX = this.data.translateX;
      translateX -= deltaX;
      if (translateX < 0) translateX = 0;
      if (translateX > 200) translateX = 200;
      this.setData({
        translateX,
      });
    },

    // 关闭当前预览图片
    closePreview(e){
      this.setData({
        scaleValue:1
      })
        this.triggerEvent('closePreview',false)
    },
    // 改变当前图片索引
    previewBindChange(e){
      this.setData({
        scaleValue:1
      })
        this.triggerEvent('previewBindChange',e.detail.current)
    },
    doubleTap(){
      const now = Date.now();
      const lastTapTime = this.data.lastTapTime;
      let isScale=this.data.isScale
      if (now - lastTapTime < 300) {
        console.log('Double tap detected');
        // Perform double-click action here

        this.setData({
          scaleValue:!isScale?2:1,
          isScale:!isScale
        })
      } else {
        this.setData({ lastTapTime: now });
      }
    },
  }
})

//css模块
.preView_image{
  position: fixed;
    background-color: #000;
    width: 100%;
    height: 100%;
    color: white;
    padding-top:40rpx ;
    z-index: 1;
    overflow: hidden;
  }
  .preView_image_head{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  .preview_image_swiper{
    margin-top: 50rpx;
    height: 860rpx !important;
  }
  .preview_image_swiper_item{
    width: 100%;
    height: 100%;
  }
 .preView_image_item{
   width: 100%;
   height: 100%;
 }
.preView_image_foot{
  margin-top: 30rpx;
  display: flex;
  justify-content: space-around;
}
.preView_image_chat{
  display: flex;
  width: 300rpx;
  padding: 30rpx;
  background-color: #40c7bc;
  text-align: center;
  border-radius:10rpx ;
}
.preView_image_chat_left{
  width: 40rpx;
  height: 40rpx;
  transform: translateY(6rpx);
  margin:0 20rpx;
}
.preView_image_chat_right{
  margin-left: 30rpx;
  display: block;
}
.preView_image_phone{
  background-color: #2caed8 !important;
}
.mask_image{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 999;
}
.bottom_pop{
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 9999;
  display: flex;
}
.bottom_pop_buttom{
  width: 100%;
  align-self:flex-end;
  height: 200rpx;
  background-color: gray;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateY(-220rpx);
  padding-bottom:20rpx ;
}
.bottom_pop_buttom>button{
  width: 100%;
}