1.一些参数和需要用到的方法js代码注释都有了，只要复制过去看就好了
2.怎么解决这个手势冲突呢，我采用的是mina-touch插件，去监听这两种手势，当双指在的时候，长按事件就不触发，滑动的时候长按事件也要阻止，因为在不停的滑动的时候，也会长按，大概就是这么一个思路。
3.有疑问的同学欢迎留言，看到后回复
4.ps:关于百度小程序的我也写过了，双指和滑动事件冲突掉了，然后去询问百度官方的也暂时没有解决方案，自己手写的兼容性也不是很好
demo文章来源地址https://www.toymoban.com/news/detail-609896.html
//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%;
}
文章来源：https://www.toymoban.com/news/detail-609896.html
到了这里，关于微信小程序缩放图片与滑动图片：movable-view与swiper一起使用所产生的手势冲突的基本解决方案（操作过于频繁还是会出现问题，基本的使用是没有问题的）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
