一对一直播源码，实现可以拖动的悬浮聊天室图标

主要代码

wxml

<br> <!-- 添加按钮 --><br>            <!--可拖动按钮控件表--><br>            <!--buttonStart和buttonEnd一定不能用catch事件，否则按钮点击事件会失效--><br>            <view class="btn_Suspension" bindtap="openAddPage" catchtouchmove="buttonMove" bindtouchstart="buttonStart" bindtouchend="buttonEnd" style="top:{{buttonTop}}px;left:{{buttonLeft}}px;"><br>                <image class="Suspension_logo" src="../images/icon-add.png"></image><!--这里是按钮图标--><br>            </view>

wxss

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

<br>var startPoint<br>Page({<br>  data: {<br>    //按钮位置参数<br>    buttonTop: 0,<br>    buttonLeft: 0,<br>    windowHeight: '',<br>    windowWidth: ''<br>  },<br>  onLoad:function(){<br>  <br>    var that =this;<br>    wx.getSystemInfo({<br>      success: function (res) {<br>        console.log(res);<br>        // 屏幕宽度、高度<br>        console.log('height=' + res.windowHeight);<br>        console.log('width=' + res.windowWidth);<br>        // 高度,宽度 单位为px<br>        that.setData({<br>          windowHeight:  res.windowHeight,<br>          windowWidth:  res.windowWidth,<br>          buttonTop:res.windowHeight*0.70,//这里定义按钮的初始位置<br>          buttonLeft:res.windowWidth*0.70,//这里定义按钮的初始位置<br>        })<br>      }<br>    })<br>  },<br> <br>  },<br>  //以下是按钮拖动事件<br>  buttonStart: function (e) {<br>    startPoint = e.touches[0]//获取拖动开始点<br>  },<br>  buttonMove: function (e) {<br>    var endPoint = e.touches[e.touches.length - 1]//获取拖动结束点<br>    //计算在X轴上拖动的距离和在Y轴上拖动的距离<br>    var translateX = endPoint.clientX - startPoint.clientX<br>    var translateY = endPoint.clientY - startPoint.clientY<br>    startPoint = endPoint//重置开始位置<br>    var buttonTop = this.data.buttonTop + translateY<br>    var buttonLeft = this.data.buttonLeft + translateX<br>    //判断是移动否超出屏幕<br>    if (buttonLeft+50 >= this.data.windowWidth){<br>      buttonLeft = this.data.windowWidth-50;<br>    }<br>    if (buttonLeft<=0){<br>      buttonLeft=0;<br>    }<br>    if (buttonTop<=0){<br>      buttonTop=0<br>    }<br>    if (buttonTop + 50 >= this.data.windowHeight){<br>      buttonTop = this.data.windowHeight-50;<br>    }<br>    this.setData({<br>      buttonTop: buttonTop,<br>      buttonLeft: buttonLeft<br>    })<br>  },<br>  buttonEnd: function (e) {<br>  }<br>})

以上就是一对一直播源码，实现可以拖动的悬浮聊天室图标，更多内容欢迎关注之后的文章