一對一直播原始碼，實現可以拖動的懸浮聊天室圖示

主要程式碼

wxml

 <!-- 新增按鈕 -->
            <!--可拖動按鈕控制元件表-->
            <!--buttonStart和buttonEnd一定不能用catch事件，否則按鈕點選事件會失效-->
            <view class="btn_Suspension" bindtap="openAddPage" catchtouchmove="buttonMove" bindtouchstart="buttonStart" bindtouchend="buttonEnd" style="top:{{buttonTop}}px;left:{{buttonLeft}}px;">
                <image class="Suspension_logo" src="../images/icon-add.png"></image><!--這裡是按鈕圖示-->
            </view>

​wxss

    /**可拖動懸浮按鈕樣式表**/
.btn_Suspension{
    position: fixed;
    height: 90rpx;
    width: 90rpx;
    
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    box-shadow: 1px 0px 1px 1px #ede7e7;
  }
  .Suspension_logo{
    position:absolute;
    height:100%;
    width:100%;
  }

js

var startPoint
Page({
  data: {
    //按鈕位置引數
    buttonTop: 0,
    buttonLeft: 0,
    windowHeight: '',
    windowWidth: ''
  },
  onLoad:function(){
  
    var that =this;
    wx.getSystemInfo({
      success: function (res) {
        console.log(res);
        // 螢幕寬度、高度
        console.log('height=' + res.windowHeight);
        console.log('width=' + res.windowWidth);
        // 高度,寬度 單位為px
        that.setData({
          windowHeight:  res.windowHeight,
          windowWidth:  res.windowWidth,
          buttonTop:res.windowHeight*0.70,//這裡定義按鈕的初始位置
          buttonLeft:res.windowWidth*0.70,//這裡定義按鈕的初始位置
        })
      }
    })
  },
 
  },
  //以下是按鈕拖動事件
  buttonStart: function (e) {
    startPoint = e.touches[0]//獲取拖動開始點
  },
  buttonMove: function (e) {
    var endPoint = e.touches[e.touches.length - 1]//獲取拖動結束點
    //計算在X軸上拖動的距離和在Y軸上拖動的距離
    var translateX = endPoint.clientX - startPoint.clientX
    var translateY = endPoint.clientY - startPoint.clientY
    startPoint = endPoint//重置開始位置
    var buttonTop = this.data.buttonTop + translateY
    var buttonLeft = this.data.buttonLeft + translateX
    //判斷是移動否超出螢幕
    if (buttonLeft+50 >= this.data.windowWidth){
      buttonLeft = this.data.windowWidth-50;
    }
    if (buttonLeft<=0){
      buttonLeft=0;
    }
    if (buttonTop<=0){
      buttonTop=0
    }
    if (buttonTop + 50 >= this.data.windowHeight){
      buttonTop = this.data.windowHeight-50;
    }
    this.setData({
      buttonTop: buttonTop,
      buttonLeft: buttonLeft
    })
  },
  buttonEnd: function (e) {
  }
})

以上就是一對一直播原始碼，實現可以拖動的懸浮聊天室圖示， 更多內容歡迎關注之後的文章