原生小程序 拖拽组件movable-view
例子：
1.wxml：
<movable-area class='movable-box'>
<movable-view class='movable-btn' x='{{x}}' y='{{y}}' direction='all' bindtouchstart='homeMoveStart' bindtouchmove='homeMoving' bindtouchend='homeMoveEnd'>
<image class="home-images" hidden="{{!status}}" src="http://qiniu.ve-link.com/files/1/d/51/a466aa61ddc3b826e52e2bbbadf8fcf16e7651d1.png" bindtap="homeBack"></image>
</movable-view>
</movable-area>
2.wxss
.movable-box {
width: 100%;
height: 100%;
}
.movable-box .movable-btn {
position: fixed;
width: 70px;
height: 70px;
line-height: 70px;
text-align: center;
visibility: visible;
}
.movable-box .movable-btn .home-images {
width: 70px;
height: 70px;
}
3.
let {windowWidth,windowHeight} = wx.getSystemInfoSync();
let localCoord = wx.getStorageSync('localPostion');
Component({
data: {
status: true,
x: (localCoord.x >= 0) ? localCoord.x : 0,
y: localCoord.y ? localCoord.y : windowHeight - 150
},
methods: {
homeMoveStart: function (e) {
this.y = e.changedTouches[0].clientY - 35;
this.x = e.changedTouches[0].clientX - 35;
},
homeMoving: function (e) {
if ((e.changedTouches[0].clientY) < -100) {
this.setData({
x: this.x,
status: false,
y: this.y,
})
}
},
homeMoveEnd: function (e) {
if ((e.changedTouches[0].clientY) < -100) {
this.setData({
x: this.x,
status: true,
y: this.y,
})
return;
}
let sysAveWidth = windowWidth / 2;
let sysHeight = windowHeight;
let currentP = {
x: 0,
y: (e.changedTouches[0].clientY - 35) > 0 ? Math.abs(e.changedTouches[0].clientY - 35) : 0,
}
if (e.changedTouches[0].clientX > sysAveWidth) {
currentP.x = windowWidth - 70;
}
if ((sysHeight - e.changedTouches[0].clientY) <= 70) {
currentP.y = windowHeight - 70;
}
this.setData({
x: currentP.x,
y: currentP.y,
status: true
})
wx.setStorageSync('localPostion', currentP);
},
homeBack: function () {
wx.reLaunch({
url: '/pages/homepage/index',
})
}
}
})
拖拽组件到这已完成！
在指定页面引入进去后（不会引用组件，查看之前的文档:https://www.cnblogs.com/mcll/p/11669822.html）
1.wxml
<movable class="btn-home"></movable>
2.wxss
.btn-home {
width: 100%;
height: 100%;
position: fixed;
top: 0;
z-index: 99;
visibility: hidden;
}
