本篇文章为大家展示了如何在微信小程序中实现一个拖拽功能，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
十多年的鹰手营子网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销的优势是能够根据用户设备显示端的尺寸不同，自动调整鹰手营子建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联从事“鹰手营子网站设计”,“鹰手营子网站推广”以来，每个客户项目都认真落实执行。
// 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;
},
})上述内容就是如何在微信小程序中实现一个拖拽功能，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。
分享标题：如何在微信小程序中实现一个拖拽功能
网页地址：
http://bjjierui.cn/article/gcjhis.html
