关于web网站的回到顶部设置,请移步《JavaScript实现网页带动画返回顶部》
废话不多说,直接上代码:
Index.wxml
html
复制代码
<image wx:if="{{visual}}" src="/images/timg.png" class="go_top" bindtap="scrollToTop" />
这个就一行代码,放哪都行。
Index.wxss
css
复制代码
.go_top{ position: fixed; bottom: 70px; right: 12px; width: 40px; height: 40px; }
Index.js
javascript
复制代码
Page({ data: { scrollHeight: wx.getSystemInfoSync().windowHeight, // 是否显示回到顶部图标 visual: false, }, /** * 点击回到顶部图片方法 */ scrollToTop() { if (wx.pageScrollTo) {//判断这个方法是否可用 wx.pageScrollTo({ scrollTop: 0 }) } else { wx.showModal({ title: '提示', content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。' }) } }, /** * 实时监听滚动条位置,显示/不显示回到顶部图片 */ onPageScroll:function(e) { let scrollTop = e.scrollTop if (scrollTop < this.data.scrollHeight / 2) { this.setData({ visual: false }) } else { this.setData({ visual: true }) } } })
最后效果:
有好的建议,请在下方输入你的评论。
欢迎访问个人博客:guanchao.site
欢迎访问我的小程序:打开微信->发现->小程序->搜索“时间里的”