小程序使用movable-area实现浮窗滑动（在两侧停留）

本文主要是介绍小程序使用movable-area实现浮窗滑动（在两侧停留），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

直接上代码：

必须有宽高
 <movable-area style="width: {{widthWrap}}px;height: {{heightWrap}}px; pointer-events: none;position: fixed;top:0px;left: 0;">
      <movable-view direction="all" x="{{x}}" y="{{y}}" inertia style="pointer-events: auto;position: absolute;top: auto;left: auto;" bindtouchend="touchEnd" bindtouchstart="touchStart" bindchange="move"> 
        <view class="wxqj-box">
         ..............里面的内容
        </view>
      </movable-view>
 </movable-area>

Page({
   data: {
       widthWrap: 0,
       heightWrap: 0,
       x: 0,
       y: 0, //设置一开始的位置
       xp: 0, //标记每次移动的起始点
       yp: 0,
       flag: false, //判断是否开始移动
   }
   onl oad() {
    //获取可视宽高度
    var w = wx.getSystemInfoSync().windowWidth;
    var h = wx.getSystemInfoSync().windowHeight;
    // console.log(h);
    this.setData({
       //这里根据自己情况调节
      widthWrap: w - 50,
      heightWrap: h - 90,
      y: (h - 90) / 2,
    })
  },
  move(e) {
    if (this.data.flag) {
      this.setData({
        x: e.detail.x,
        y: e.detail.y,
        xp: e.detail.x,
        yp: e.detail.y
      })
    }
  },
  //开始触摸的时候获取位置坐标
  touchStart() {
    this.setData({
      flag: true,
      xp: this.data.x,
      yp: this.data.y
    })
  },
  touchEnd() {
    this.setData({
      flag: false
    })
    if (this.data.x > this.data.widthWrap / 2) {
      this.setData({
        x: this.data.widthWrap,
        // y: this.data.yp
      })
    } else {
      this.setData({
        x: 0,
        // y: this.data.yp
      })
    }
    console.log(this.data.yp);
    this.setData({
      y: this.data.yp
    })
  },
}）

这篇关于小程序使用movable-area实现浮窗滑动（在两侧停留）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！