原生微信小程序---在页面上可拖动的按钮

最新推荐文章于 2024-04-09 15:43:53 发布

CSDN_lyy93

最新推荐文章于 2024-04-09 15:43:53 发布

阅读量199

点赞数

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/CSDN_lyy93/article/details/134545782

版权

.wxml

<view class="content" style="top:{{buttonTop}}px;left:{{buttonLeft}}px" 
    catch:touchmove="buttonMove" bind:touchstart="buttonStart" catch:tap="toSquare">
    <image src="../../assets/images/square-icon.png" class="icon"></image>
</view>

.js

let startPoint = null
Component({

  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    buttonTop: 0,
    buttonLeft: 0,
    windowHeight: 0,
    windowWidth: 0,
    minTop: 0
  },
  pageLifetimes: {
    show() {
    //   wx.getSystemInfo({
    //     success: (res) => {
    //     //   console.log(res, 'info')
    //       //获取到设备的宽高
    //       let h = res.windowHeight, w = res.windowWidth
    //       this.setData({
    //         windowHeight: h,
    //         windowWidth: w,
    //         /* buttonLeft: getStorage('buttonLeft') ? getStorage('buttonLeft') : w * 0.7,
    //         buttonTop: getStorage('buttonTop') ? getStorage('buttonTop') : h * 0.7 */
    //         buttonLeft: w * 0.8,
    //         buttonTop: h * 0.8,
    //         minTop: res.statusBarHeight 
    //       })
    //     }
    //   })
    }
  },
  ready () {
    wx.getSystemInfo({
        success: (res) => {
        //   console.log(res, 'info')
          //获取到设备的宽高
          let h = res.windowHeight, w = res.windowWidth
          this.setData({
            windowHeight: h,
            windowWidth: w,
            /* buttonLeft: getStorage('buttonLeft') ? getStorage('buttonLeft') : w * 0.7,
            buttonTop: getStorage('buttonTop') ? getStorage('buttonTop') : h * 0.7 */
            buttonLeft: w * 0.8,
            buttonTop: h * 0.8,
            minTop: res.statusBarHeight 
          })
        }
      })
  },


  /**
   * 组件的方法列表
   */
  methods: {
    buttonStart(e) {
        // console.log(e, 'buttonStart')
        startPoint = e.touches[0]
    },
    buttonMove(e) {
        //计算拖动后的坐标
        let endPoint = e.touches[e.touches.length - 1],
          disX = endPoint.clientX - startPoint.clientX,
          disY = endPoint.clientY - startPoint.clientY
        startPoint = endPoint
  
        let buttonTop = this.data.buttonTop + disY,
          buttonLeft = this.data.buttonLeft + disX
  
        //判断是否超出屏幕
        if (buttonLeft + 72 >= this.data.windowWidth) {
          buttonLeft = this.data.windowWidth - 72
        }
        if (buttonLeft <= 0) {
          buttonLeft = 0
        }
        if (buttonTop + 80 >= this.data.windowHeight) {
          buttonTop = this.data.windowHeight - 80
        }
        if (buttonTop <= this.data.minTop) {
          buttonTop = this.data.minTop
        }
  
        this.setData({
          buttonTop,
          buttonLeft
        })
        // console.log(disX, disY, '999')
    }
})