小程序 WXS響應事件（超出兩屏顯示返回頂部按鈕）

兩種解決辦法：

view頁面形式實現：

<wxs module="test" src="./test.wxs"></wxs> // 引入wxs<scroll-viewbindscroll="onPageUpdate"style='height:100%;'scroll-yscroll-with-animation="true" > </scroll-view> <!-- 返回頂部按鈕 --> <view bindtap="scrollTop" class="back-top-btn"><view class="back-top-btn-box"><text>回到</text><text>頂部</text></view> </view> Page({data: {windowHeight： app.globalData.windowHeight, // 屏幕高度},//滾動條監聽onPageUpdate: (e) => {// 頁面滾動超過兩屏顯示返回頂部if (e.scrollTop > this.data.windowHeight * 2) {this.setData({ isRoll: true })} else {this.setData({ isRoll: false})}},/*** 返回頂部*/scrollTop() {if (wx.pageScrollTo) {wx.pageScrollTo({ scrollTop: 0 })} else {wx.showModal({title: '提示',content: '當前微信版本過低，無法使用該功能，請升級到最新微信版本后重試。'})}} }) .back-top-btn {position: fixed;bottom: 60rpx;right: 30rpx; }

scroll-view形式實現

<wxs module="test" src="./test.wxs"></wxs> <scroll-viewbindscroll="{{test.funcA}}"data-window-height="{{windowHeight}}"scroll-top='{{scrollTop}}'style='height:100%;'scroll-yscroll-with-animation="true" > </scroll-view> <!-- 返回頂部按鈕 --> <view bindtap="scrollTop" class="back-top-btn"><view class="back-top-btn-box"><text>回到</text><text>頂部</text></view> </view> var funcA = function (e, ins) {var scrollTop = e.detail.scrollTopvar windowHeight = e.currentTarget.dataset.windowHeight// 超出兩屏顯示返回頂部按鈕if (scrollTop > windowHeight*2) {ins.selectComponent('.back-top-btn').setStyle({display:'block'})} else {ins.selectComponent('.back-top-btn').setStyle({display: 'none'}) } module.exports = {funcA: funcA }JS文件 Page({data: {windowHeight： app.globalData.windowHeight, // 屏幕高度},/*** 返回頂部*/scrollTop() {this.setData({scrollTop: 0});} }) .back-top-btn {position: fixed;bottom: 60rpx;right: 30rpx;display: none; } app.js onLaunch(options) {wx.getSystemInfo({success: (res) => {this.globalData.windowHeight = res.windowHeight;this.globalData.windowWidth = res.windowWidth;this.globalData.ratio = res.windowWidth / 375;this.globalData.rpx = Number((res.windowWidth / 750).toFixed(4));if (res.model.search('iPhone X') != -1) {this.globalData.isIphoneX = true;}if (res.platform == 'ios') {this.globalData.isIos = true;}},}); }

總結

以上是生活随笔為你收集整理的小程序 WXS响应事件（超出两屏显示返回顶部按钮）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。