首页 > 代码库 > 如何使用小程序做到回到顶部的效
如何使用小程序做到回到顶部的效
这里小程序有个组件是可以实现的，那就是scroll-view组件，他具有很多的属性，其中我们要利用到以下两个属性来处理：
| scroll-top | Number | 设置竖向滚动条位置 |
| bindscroll | EventHandle | 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |
通过滚动触发事件，获取距离文档顶部的scrollTop值，当达到一定条件【>300】的时候，显示gotop层，针对这个层写点击事件，重新设置scroll-top值，偶然间发现设置scroll-top的一个bug，如果我下一次设置的值和本次scroll-top值是一样的，那么文档并不会有任何动作。因此我的做法是在0和1之间切换设置，具体做法如下：
<scroll-view style="height: 100%;" scroll-y="true" scroll-top="{{scrollTop.scroll_top}}" bindscroll="scrollTopFun"> <view style="height: 11111rpx; border: solid 1px red;"> 123456 ----{{test}} </view> </scroll-view> <view style="position: absolute; bottom: 50rpx; right: 30rpx; width: 120rpx; height: 120rpx; border: solid 1px green;" wx:if="{{scrollTop.goTop_show}}" catchtap="goTopFun"></view> JS:
Page({ data: { test: "", scrollTop: { scroll_top: 0, goTop_show: false } }, scrollTopFun: function (e) { console.log(e.detail); if (e.detail.scrollTop > 300) {//触发gotop的显示条件 this.setData({ ‘scrollTop.goTop_show‘: true }); console.log(this.data.scrollTop) } else { this.setData({ ‘scrollTop.goTop_show‘: false }); } }, goTopFun: function (e) { var _top = this.data.scrollTop.scroll_top;//发现设置scroll-top值不能和上一次的值一样，否则无效，所以这里加了个判断 if (_top == 1) { _top = 0; } else { _top = 1; } this.setData({ ‘scrollTop.scroll_top‘: _top }); console.log("----"); console.log(this.data.scrollTop) }})
最终效果如下：
如何使用小程序做到回到顶部的效
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。