匿名通过本文主要向大家介绍了小程序,实现,功能等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
本文主要和大家分享微信小程序开发之图片拖拽功能的实现，拖拽功能我们会经常遇到，希望能帮助到大家。
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="moveEvent"bindload="imageLoad"animation="
{{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()
})
});
}
})由于上次做的这个有问题，并没有记录上一次移动的效果。所以这次我使用了洪荒之力，修改下代码。
相关推荐：
H5怎样做出图片拖拽上传预览组件
JavaScript实现图片拖拽上传的方法
JavaScript实现文字与图片拖拽效果的方法_javascript技巧
以上就是微信小程序开发之图片拖拽功能的实现的详细内容，更多请关注微课江湖其它相关文章！