小程序回到顶部有哪两种方式

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

小程序回到顶部有两种方式，分别是：

（学习推荐：编程视频）

一、使用view形式的回到顶部

HTML：

登录后复制

CSS：

/* 返回顶部 */.goTop{ height: 80rpx; width: 80rpx; position: fixed; bottom: 50rpx; background: rgba(0,0,0,.3); right: 30rpx; border-radius: 50%;}登录后复制

JS：

// 获取滚动条当前位置 onPageScroll: function (e) { console.log(e) if (e.scrollTop > 100) { this.setData({ floorstatus: true }); } else { this.setData({ floorstatus: false }); } }, //回到顶部 goTop: function (e) { // 一键回到顶部 if (wx.pageScrollTo) { wx.pageScrollTo({ scrollTop: 0 }) } else { wx.showModal({ title: '提示', content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。' }) } },登录后复制

二.使用scroll-view形式的回到顶部

登录后复制

CSS：

/* 返回顶部 */.goTop{ height: 80rpx; width: 80rpx; position: fixed; bottom: 50rpx; background: rgba(0,0,0,.3); right: 30rpx; border-radius: 50%;}登录后复制

JS：

data:{ topNum: 0 } // 获取滚动条当前位置 scrolltoupper:function(e){ console.log(e) let t = e.detail.scrollTop; if (t > 100 && !this.data.floorstatus) { // 避免重复setData this.setData({ floorstatus: true }); } if(t <= 100 && this.data.floorstatus){ this.setData({ floorstatus: false }); } }, //回到顶部 goTop: function (e) { // 一键回到顶部 this.setData({ topNum: this.data.topNum = 0 }); },登录后复制

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。