标签：area movable detail widthWrap flag yp 浮窗 data setData

直接上代码：

必须有宽高
 <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
    })
  },
}）

标签：area,movable,detail,widthWrap,flag,yp,浮窗,data,setData
来源： https://blog.csdn.net/weixin_46653486/article/details/122825384

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。