微信小程序movable-area

movable-area是微信小程序的新组件，可以用来移动视图区域movable-view。移动方向可选择任何、垂直和平行。可移动区域里包含其他文本、图片、按钮等组件。可移动区域可绑定touchend等事件。movable-view的参数可调整动画效果。

本次小程序实现两个按钮的拖动互换，垂直移动。wxml如下：

<movable-area style="height: 200px;width: 200px;background: red;">
<movable-view bindtouchend="kg" style="height: 50px; width: 150px; background: blue;" x="{{x1}}" y="{{y1}}" direction="vertical">
<button bindtap="gg">客服哥哥</button>
</movable-view>
<movable-view bindtouchend="km" style="height: 50px; width: 150px; background: green;" x="{{x2}}" y="{{y2}}" direction="vertical">
<button bindtap="mm">客服妹妹</button>
</movable-view>
</movable-area>

Page({
data: {
x1: 10,
y1: 10,
x2: 10,
y2: 100
},
gg: function () {
wx.makePhoneCall({
phoneNumber: '12345' //仅为示例，并非真实的电话号码
})
},
mm: function () {
wx.makePhoneCall({
phoneNumber: '54321' //仅为示例，并非真实的电话号码
})
},
kg: function (e) {
console.log(e.changedTouches[0].pageY)
var y = e.changedTouches[0].pageY
if (y < 100) {
this.setData({
x1: 10,
y1: 10,
x2: 10,
y2: 100
})
}
else {
this.setData({
x2: 10,
y2: 10,
x1: 10,
y1: 100
})
}
},
km: function (e) {
console.log(e.changedTouches[0].pageY)
var y = e.changedTouches[0].pageY
if (y > 100) {
this.setData({
x1: 10,
y1: 10,
x2: 10,
y2: 100
})
}
else {
this.setData({
x2: 10,
y2: 10,
x1: 10,
y1: 100
})
}
},
})

最后

以上就是霸气过客为你收集整理的微信小程序movable-area的全部内容，希望文章能够帮你解决微信小程序movable-area所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。