ドラッグ可能なフローティングチャットルームアイコンを実現するための1対1のライブブロードキャストソースコード
メインコード
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;
background-color: rgba(255, 255, 255, 0.755);
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) {
}
})
上記は、ドラッグ可能なフローティングチャットルームアイコンを実現する1対1のライブブロードキャストのソースコードです。その他のコンテンツについては、今後の記事に注意してください。