版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。
版权
小程序专栏收录该内容
4 篇文章0 订阅
订阅专栏
今天老师上课布置了实现图片拖动的功能,大概实验样子如下:
我实现用的不是这个图片,哈哈。其实实现挺简单的,就是把图片的位置设置成鼠标移动的位置。主要代码如下,不懂看解释。
wxml代码
js代码
//index.js //获取应用实例 const app = getApp() Page({ data: { x: '120',//图片位置坐标数据 y: '120', }, move: function (e) { this.setData({ x: e.touches[0].pageX, y: e.touches[0].pageY })//将鼠标的位置赋给图片位置数据,这样图片就可以移动了 console.log('我正在移动') console.log('pageX: ' + e.touches[0].pageX);//打印图片位置 console.log('pageY: ' + e.touches[0].pageY); //console.log(e) } })
xmss代码
/**index.wxss**/ .size{ position: absolute; width: 70px; height: 70px; }
自己在做这个过程中,没有遇到错误,但是同学遇到 控制台能打印出数据并且图片位置x,y确实也在改变,但是就是图片拖不动,后面自己研究一下,是因为他没有设置图片的位置,图片位置一定要设置成绝对位置,不然整个视图也会随着变化,所以你会觉得图片没有移动。我实现的效果如下: