微信小程序缩放图片和滑动图片movable-view和swiper使用所产生的手势冲突的基本解决方案操作过于频繁还是会出现问题,基本的使用是没有问题的
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="https://blog.csdn.net/weixin_44647865/article/details/{{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%;
}
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhicjkfk
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
excel打印预览压线压字怎么办
PHP中文网 06-22