色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

小程序點擊向上移動css

林子帆2年前9瀏覽0評論

小程序中實現點擊向上滑動的效果,需要用到CSS中的transform屬性。以下是實現代碼:

// CSS樣式
.scroll-view {
height: 100vh;
overflow: hidden;
transition-duration: 0.3s;
}
.to-top {
display: none;
position: fixed;
right: 20px;
bottom: 80px;
width: 50px;
height: 50px;
border-radius: 50%;
line-height: 50px;
text-align: center;
background-color: #fff;
box-shadow: 0px 2px 8px rgba(0,0,0,0.15);
color: #333;
font-size: 24px;
cursor: pointer;
transition-duration: 0.3s;
}
.to-top.active {
display: block;
}
// JavaScript代碼
Page({
data: {
scrollHeight: 0,  // 計算scroll-view的高度
toTopShow: false,  // 控制to-top顯示隱藏
},
onLoad: function () {
let that = this;
wx.getSystemInfo({
success: function (res) {
that.setData({
scrollHeight: res.windowHeight
});
}
});
},
onPageScroll: function (e) {
if (e.scrollTop >this.data.scrollHeight / 2) {
this.setData({
toTopShow: true
});
} else {
this.setData({
toTopShow: false
});
}
},
toTop: function () {
wx.pageScrollTo({
scrollTop: 0,
duration: 300
});
}
})

上述代碼中,首先通過獲取系統信息得到頁面高度,然后通過監聽頁面滾動來控制向上滑動按鈕的顯示和隱藏。當頁面滾動高度大于頁面高度一半時,顯示按鈕;當頁面滾動高度小于頁面高度一半時,隱藏按鈕。最后,點擊按鈕調用wx.pageScrollTo方法實現滑動到頁面頂部的效果。