<view class="suspend-btn" bindtap='addCollect' wx:if="{{write[0]+write[1] > 0}}" bindtouchmove="touchmove" catch:touchmove style="left:{{write[0]}}px;top:{{write[1]}}px;">
</view>
==========
/ 悬浮按钮样式 /
.suspend-btn {
position: absolute;
z-index: 99;
width: 80rpx;
height: 80rpx;
border-radius: 50%;
background-color: red;
}
======
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;
},
小程序可手指拖拽移动的小球
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 1. 微信小程序唤起微信小程序 小程序唤起其他小程序很简单先上链接小程序跳转小程序 Navigator组件 推荐使...
- 仿发朋友圈，图片拖拽排序功能，小程序拖拽排序组件 效果演示 地址：https://github.com/yijin...
