xiaoshi-wx/myComponents/floatButton/floatButton.js

// myComponents/floatButton/floatButton.js
const App = getApp()
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    count:{
      type:Number,
      value:0
    },
    icon:{
      type:String,
      value:'myIcon14'
    },
    position:{
      type:String,
      value:'left'
    },
    max:{
      type:Number,
      value:99
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    top:450,
    left:0,
    windowHeight:App.globalData.windowHeight,
    windowWidth:App.globalData.windowWidth,
    startX: 0, // 触摸开始时的 X 坐标  
    startY: 0, // 触摸开始时的 Y 坐标  
    isDragging: false, // 是否正在拖动  
  },

  /**
   * 组件的方法列表
   */
  methods: {
    //改变位置
    changePosition(){
      var left = 0
      if(this.properties.position == 'left'){
        left = 0
      }else{
        left = parseInt(this.data.windowWidth) - 100
      }
      this.setData(
        {
          left:left
        }
      )
    },
    onButtonTouchStart: function(e) {  
      this.setData({  
        startX: e.touches[0].clientX,  
        startY: e.touches[0].clientY,  
        isDragging: true,  
      });  
    },  
      
    onButtonMove: function(e) {  
      if (!this.data.isDragging) return;
      // const deltaX = e.touches[0].clientX - this.data.startX;  
      const deltaY = e.touches[0].clientY - this.data.startY; 
      // let  newLeft;  
      let  newTop; 
      if(this.data.buttonStyle){
        //  newLeft = parseInt(this.data.left) + deltaX;  
         newTop = parseInt(this.data.top) + deltaY;   
      }else{
        // newLeft = this.data.startX;  
        newTop = this.data.startY; 
      }
      newTop = newTop<50?50:newTop
      newTop = newTop>this.data.windowHeight?this.data.windowHeight:newTop
      // console.log(newLeft,newTop)

      this.setData({  
        // buttonStyle: `left:  ${newleft}px; top: ${newTop}px;`,
        top:newTop,
        // left:newLeft,  
        startX: e.touches[0].clientX,  
        startY: e.touches[0].clientY,  
      });  
    },  
      
    onButtonTouchEnd: function() {  
      this.setData({  
        isDragging: false,  
      });  
    }, 

    click(e){
      this.triggerEvent('click')
    }
  },
  lifetimes: {  
    // 在组件实例进入页面节点树时执行  
    attached: function () {  
      // 初始化操作  
      // console.log('组件初始化');  
      this.changePosition()
      // ...  
    },  
    // 在组件实例被移除出页面节点树时执行  
    detached: function () {  
      // 清理工作  
      console.log('组件销毁');  
      // ...  
    },  
    // ...  
  }
})