微信下程序(手势滑动图片缩放)
微信下程序(手势滑动图片缩放)组件
先看效果:
- 下载组件 手势缩放组件
- 导入组件
连同文件复制到自己的项目中 - 配置组件
在自己的页面总的json中如图配置
{
"usingComponents": {
"zoomImg":"../libs/ZoomPreview/index"
}
}
- 引入组件
- 在wxjs中配置
let zoomId = this.selectComponent("#zoomId");let zoomId = this.selectComponent("#zoomId");
let igPath = "../../../images/zoomImg.jpg";
zoomId.setImgSrc(igPath);
详解: `zoomId.setImgSrc(igPath);//通过设置组件的预览图片地址
注意: 如果是网络图片直接传图完整路径(路径+图片名+图片格式),如果是相对路径,必须是组件相对的图片路径
如果不想下载那就复制粘贴自己写组价------->跟我来写
.wxml 文件
<view class="container">
<scroll-view class="img" bindtouchstart="touchstartCallback" bindtouchmove="touchmoveCallback" bindtouchend="touchendCallback" scroll-x="true" scroll-y="true">
<image style="zoom:{{stv.scale}};" src='{{stv.imgPath}}'></image>
</scroll-view>
</view>
.wxss 文件
.img{
width: 100%;
height: 100%;
background: white;
text-align: center;
}
.js 文件
Component({
data: {
stv: {
zoom: false, //是否缩放状态
distance: 0, //两指距离
scale: 1, //缩放倍数
imgPath: "../../../images/timg.jpg", //图片路径
}
},
methods: {
setImgSrc: function(imgPath) {
this.setData({
'stv.imgPath': imgPath,
})
},
//事件处理函数
touchstartCallback: function(e) {
//触摸开始
if (e.touches.length === 1) {
let {
clientX,
clientY
} = e.touches[0];
this.startX = clientX;
this.startY = clientY;
this.touchStartEvent = e.touches;
} else {
let xMove = e.touches[1].clientX - e.touches[0].clientX;
let yMove = e.touches[1].clientY - e.touches[0].clientY;
let distance = Math.sqrt(xMove * xMove + yMove * yMove);
this.setData({
'stv.distance': distance,
'stv.zoom': true, //缩放状态
})
}
},
touchmoveCallback: function(e) {
//触摸移动中
if (e.touches.length === 1) {
//单指移动
if (this.data.stv.zoom) {
//缩放状态,不处理单指
return;
}
let {
clientX,
clientY
} = e.touches[0];
let offsetX = clientX - this.startX;
let offsetY = clientY - this.startY;
this.startX = clientX;
this.startY = clientY;
let {
stv
} = this.data;
stv.offsetX += offsetX;
stv.offsetY += offsetY;
stv.offsetLeftX = -stv.offsetX;
stv.offsetLeftY = -stv.offsetLeftY;
this.setData({
stv: stv
});
} else {
//双指缩放
let xMove = e.touches[1].clientX - e.touches[0].clientX;
let yMove = e.touches[1].clientY - e.touches[0].clientY;
let distance = Math.sqrt(xMove * xMove + yMove * yMove);
let distanceDiff = distance - this.data.stv.distance;
let newScale = this.data.stv.scale + 0.005 * distanceDiff;
this.setData({
'stv.distance': distance,
'stv.scale': newScale > 1 ? newScale:1,
})
}
},
touchendCallback: function(e) {
//触摸结束
if (e.touches.length === 0) {
this.setData({
'stv.zoom': false, //重置缩放状态
})
}
},
}
})
.json 文件
{
"component": true,
"usingComponents": {}
}
--------------完-----------------运行试试
有什么问题及时提出,不吝赐教
邮箱: [email protected]