实现一个悬浮按钮上滑展开，下滑收起效果
收起
展开
设置变量serviceShow判断上滑下滑，默认是false
<button class="coustom {{serviceShow&&'servicer_move'}}" open-type="contact" wx:if="{{title}}">
<image src="/static/images/icon/customactive.png" style="width: 320rpx;height: 112rpx;transition: all 1s;"></image>
</button>
在整个页面外部添加下滑上滑方法
<view bindtouchstart="handletouchstart" bindtouchmove="handletouchmove">
page外部申明变量
let startX = 0,
startY = 0,
t;
//滑动开始事件
handletouchstart: function (e) {
startX = e.touches[0].pageX,
startY = e.touches[0].pageY;
},
// 监听页面滚动事件
handletouchmove (e) {
let that = this;
console.log("pageTouchmove", e);
let moveEndX = e.touches[0].pageX,
moveEndY = e.touches[0].pageY,
X = moveEndX - startX,
Y = moveEndY - startY;
if (Math.abs(Y) > Math.abs(X) && Y > 0) {
that.setData({
serviceShow: false,
})
clearTimeout(t);
t = setTimeout(function () {
that.setData({
serviceShow: true,
})
}, 3e3)
} else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
that.setData({
serviceShow: true,
})
} else {
console.log("just touch");
}
}
.servicer_move {
transform: translateX(65%);
}
.servicer_move image{
transform: translateX(-65%);
}
.coustom{
position: fixed;
bottom: 310rpx;
right: 24rpx;
height: 112rpx;
border-radius: 112rpx;
overflow: hidden;
transition: all 1s;
padding: 0;
}
