小程序 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;}},});
}