小程序中實現點擊向上滑動的效果,需要用到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方法實現滑動到頁面頂部的效果。
上一篇jquery 拖拽標簽
下一篇jquery 拖動選擇