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

微信小程序组件movablearea,实现小图标,在窗口中来回拖动

E企盈小程序直播系统

需求:  微信小程序中,一张小图标,可以在窗口中来回拖动。解决方法:使用小程序的movable-area组件,movable-area class=”movableArea”movable-view class=”movableView” style=”height: 50rpx; width: 50rpx; background:                                       blue;” x=”{{x}}” y=”{{y}}” direction=”all” bindtouchend=”moveEnd”    view class=”movableBtn”    图标    /view    /movable-view/movable-area样式:主要利用css3的pointer-events属性,给movable-area设置上pointer-events: none;那么该元素不在是鼠标事件的目标,鼠标不再监听当前层而去监听下面的层中的元素。给他的子级movable-view设置上pointer-events: auto,那么子元素还是鼠标事件的目标。.movableArea {position: fixed;width: 100%;height: 100%;pointer-events: none;}.movableView {pointer-events: auto;}.movableBtn {width: 100%;height: 100%;font-size: 26rpx;}js:实现图标定位到左侧20px或者右侧20px。data: {    x: 0,    y: 0},moveEnd (e) {//想让他定位到,距离左侧20px(750的图片),通过计算,来适应不同的手机屏幕  var xNumLeft = 20 / 750 * wx.getSystemInfoSync().windowWidth;//想让他定位到,距离右侧20px(750的图片),自身宽度为50在加上20,计算出x为680  var xNumRight = 680 / 750 * wx.getSystemInfoSync().windowWidth;  var x = e.changedTouches[0].pageX;  var average = 375 / 750 * wx.getSystemInfoSync().windowWidth;//获取移动到的y轴,手指松开后,直接上图标定位到当前y轴  var yNum = e.changedTouches[0].pageY;  console.log(yNum)  if (x average) {  this.setData({  x: xNumLeft,y: yNum  })  } else {  this.setData({  x: xNumRight,y: yNum  })  }}

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序组件movablearea,实现小图标,在窗口中来回拖动
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏