<强>微信小程序开发图片拖拽实例详解
<强> 1。编写页面结构:moveimg。wxml
& lt;视图类=叭萜鳌北?
& lt;视图类=拔省北?
& lt;图像类="模拟真人" src=" https://www.yisu.com/uploads/foods.jpg " bindtouchmove=癰allMoveEvent”比;
& lt;/image>
& lt;/view>
& lt;/view>
之前
<强> 2。编写页面样式:moveimg。wxs
.container {
box-sizing: border-box;
填充:1快速眼动;
}
.cnt {
宽度:100%;
高度:15眼动;
边界:1 px固体# ccc;
位置:相对;
溢出:隐藏;
}
.image-style {
位置:绝对的;
上图:0 px;
左:0 px;
高度:100%;
}
之前
<强> 3。设置数据:moveimg.js
应用var=getApp ()
页面({
数据:{
ballleft: -20,
screenWidth: 0,
},
onLoad:函数(){
var _this=;
wx.getSystemInfo ({
成功:函数(res) {
_this.setData ({
screenHeight: res.windowHeight,
screenWidth: res.windowWidth,
});
}
});
},
ballMoveEvent:函数(e) {
var沾=e.touches [0];
var pageX=touchs.pageX;
控制台。日志(“宽度' + this.data.screenWidth)
控制台。日志(“pageX:”+ pageX);//这里用正确和底部。所以需要将pageX pageY转换
var x=this.data。screenWidth/2 - pageX-20;
如果(this.data.screenWidth> 385) {
如果(x> 42) {x=42;}
其他}{
如果(x> 32) {x=32;}
}
如果(x<0) {x=0;}
控制台。日志(' x: ' + x)
this.setData ({
ballleft: - x
});
}
})
之前
,,这几天一直在研究图片裁剪,思路是有,可是却遇到各种问题。可怜编程不易啊。
想了好久,决定还是简单开始吧。如果大家有更好的方式或是其他想法,欢迎提出,一起讨论。
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
