微信小程序实现拖拽功能
<view class='collectBox'
bindtap='addCollect'
wx:if="{{write[0]+write[1] > 0}}"
bindtouchmove="touchmove"
catch:touchmove
style="left:{{write[0]}}px;top:{{write[1]}}px;">
<image src='../../images/icon/addcollect.png'></image>
</view>
// pages/cateDetaile/cateDetaile.js
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
// 拖拽参数
writePosition: [80, 90], //默认定位参数
writesize: [0, 0],// X Y 定位
window: [0, 0], //屏幕尺寸
write: [0, 0], //定位参数
scrolltop: 0,//据顶部距离
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 在页面中定义插屏广告
let that = this;
that.getSysdata();
},
//计算默认定位值
getSysdata: function () {
var that = this;
wx.getSystemInfo({
success: function (e) {
that.data.window = [e.windowWidth, e.windowHeight];
var write = [];
write[0] = that.data.window[0] * that.data.writePosition[0] / 100;
write[1] = that.data.window[1] * that.data.writePosition[1] / 100;
console.log(write,45)
that.setData({
write: write
}, function () {
// 获取元素宽高
wx.createSelectorQuery().select('.collectBox').boundingClientRect(function (res) {
console.log(res.width)
that.data.writesize = [res.width, res.height];
}).exec();
})
},
fail: function (e) {
console.log(e)
}
});
},
//开始拖拽
touchmove: function (e) {
var that = this;
var position = [e.touches[0].pageX - that.data.writesize[0] / 2, e.touches[0].pageY - that.data.writesize[1] / 2 - this.data.scrolltop];
that.setData({
write: position
});
},
onPageScroll(e) {
this.data.scrolltop = e.scrollTop;
},
})
总结
以上所述是小编给大家介绍的微信小程序实现拖拽功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
以上是 微信小程序实现拖拽功能 的全部内容, 来源链接: utcz.com/z/360341.html