1.编写页面结构:moveimg.wxml
<view class=container style=height:{{screenHeight}}px; >
<view class=cnt>
<image class=image-style src=../uploads/2.jpg style=width:
{{imgwidth}}px;height:{{imgheight}}px;bindtouchstart=startEvent
bindtouchmove=moveEventbindload=imageLoadanimation=
{{animationData}}bindtouchend=endEvent>
</image>
</view>
</view>2.编写页面样式：moveimg.wxss
.container {
box-sizing:border-box;
padding:1rem;
}
.cnt{
width:100%;
height:70%;
border: 1px solid #ccc;
position:relative;
overflow: hidden;
z-index:9999;
}
.image-style{
-webkit-transform:translate(-38px,0px);
}3.设置数据:moveimg.js
var app = getApp()
Page({
data: {
imgwidth:0,
imgheight:0,
animationData: {},
movex:0,
movey:0,
x:0,
y:0,
},
onLoad: function() {
// 页面初始化 options为页面跳转所带来的参数
var _this = this;
wx.getSystemInfo({
success: function(res) {
_this.setData({
screenHeight: res.windowHeight,
screenWidth: res.windowWidth,
});
}
});
},
onReady:function(){
// 页面渲染完成
//实例化一个动画
this.animation = wx.createAnimation({
duration: 1000,
timingFunction: 'linear',//均匀
transformOrigin: left top 0px,
})
},
imageLoad: function(e) {
var _this=this;
//1.框的宽高
var cnt_offetw=_this.data.screenWidth-38,
cnt_offeth=(_this.data.screenHeight-38)*0.7;
//2.获取图片真实宽度
var $width=e.detail.width, //获取图片真实宽度
$height=e.detail.height,
ratio=$width/$height; //图片的真实宽高比例
//3.进行判断:当图片小于框时候，图片大小等于框大小，当大于框的时候，则成比例呈现
var viewWidth=_this.data.screenWidth; //设置图片固定宽度值，
var viewHeight=parseInt(viewWidth/ratio); //计算的高度值
if (viewHeight< cnt_offeth) {
viewHeight=cnt_offeth;
}
_this.setData({
imgwidth:viewWidth,
imgheight:viewHeight,
cnt_boxw:cnt_offetw,
cnt_boxh:cnt_offeth,
})
},
startEvent:function(e){
//1.获取鼠标点击下去的
this.setData({
startx: e.touches[0].pageX,
starty: e.touches[0].pageY
})
},
moveEvent: function(e) {
var _this=this;
//2.鼠标移动的位置
var pageX = e.touches[0].pageX;
var pageY = e.touches[0].pageY;
var x,y;
//3.记住初始化图片x,y
var endx=_this.data.x,endy=_this.data.y;
//4.判断
var w_x=_this.data.imgwidth-_this.data.cnt_boxw;//x拖拽值：图片宽-框的宽
var h_y=parseInt(_this.data.imgheight-_this.data.cnt_boxh);//y拖拽值：图片高-框高
var DistanceX = pageX - _this.data.startx;//x:当鼠标点击到移动的点之间的距离
var DistanceY =pageY - _this.data.starty;//y:当鼠标点击到移动的点之间的距离
if (DistanceX>0){
//往右移动 如果当前的值大于等于0时则不移动，否则当前值加上鼠标拖拽的距离
if (endx >= 0) {
x = 0;
} else {
x = endx + DistanceX;
}
}else{
//往左移动:x拖拽值大于等于当前的值，说明已经到边上了，就等于拖拽值，否则当前的值加上鼠标拖拽的距离
if (w_x >= endx) {
x = -w_x;
} else {
x = endx + DistanceX;
}
}
if (DistanceY>0){
//往下移动:如果当前的值大于等于0时则不移动，否则当前值加上鼠标拖拽的距离
if(endy>=0){
y =0;
}else{
y = endy + DistanceY;
}
}else{
//往上移动:y拖拽值大于等于当前的值，说明已经到边上了，就等于拖拽值，否则当前的值加上鼠标拖拽的距离
if(-endy==h_y||-endy>h_y){
y=-h_y;
console.log(da0)
}else{
y=endy+DistanceY;
console.log(da 1)
}
}
setTimeout(function() {
_this.animation.translate(x, y).step();
_this.setData({
animationData: this.animation.export()
})
}.bind(this), 0)
_this.setData({
x:x,
y:y,
})
endx=x;endy=y;//记住这次的图片移动的范围
_this.data.startx=pageX;_this.data.starty=pageY;// 每移动一次把上一次的点作为原点
},
endEvent:function(){
clearTimeout(function(){
this.animation.translate(this.data.x,this.data.y).step();
this.setData({
animationData: this.animation.export()
})
});
}
})由于上次做的这个有问题，并没有记录上一次移动的效果。所以这次我使用了洪荒之力，修改下代码。
相关推荐：
JavaScript实现文字与图片拖拽效果的方法_javascript技巧
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
