E企盈营销工具技术服务商 热线:4006-838-530

微信小程序movablearea

E企盈直播平台营销卖货系统

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-areajs文件如下,拖动一个按钮时,另一个按钮到对面。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      })    }  },})

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序movablearea
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏