實(shí)現(xiàn)一個(gè)懸浮按鈕上滑展開，下滑收起效果
收起
展開
設(shè)置變量serviceShow判斷上滑下滑暂氯，默認(rèn)是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>
在整個(gè)頁(yè)面外部添加下滑上滑方法
<view bindtouchstart="handletouchstart" bindtouchmove="handletouchmove">
page外部申明變量
let startX = 0,
startY = 0,
t;
//滑動(dòng)開始事件
handletouchstart: function (e) {
startX = e.touches[0].pageX,
startY = e.touches[0].pageY;
},
// 監(jiān)聽頁(yè)面滾動(dòng)事件
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;
}
