通过scroll-view组件实现小程序回到顶部特效
Admin 2021-05-27 群英行业资讯
我们在浏览网页的时候,经常会使用到一键回到顶部的功能,使用这个功能可以让我们非常方便地回到网页顶部。尤其是一些比较长的网页,如果没有这个功能,简直让人无法想象。那么在小程序中该如何实现这个功能呢?
这里小程序有个组件是可以实现的,那就是scroll-view组件,他具有很多的属性,其中我们要利用到以下两个属性来处理:
通过滚动触发事件,获取距离文档顶部的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) } })
最终效果图:
相关推荐:小程序开发教程
以上就是利用scroll-view组件实现小程序回到顶部特效的详细内容,更多请关注群英网络其它相关文章!
(来源:PHP中文网)
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
微信出现“正在输入”的两种情况:1、如果你向对方发送短信后,在10秒以内的时间里,对方打开了与你的聊天界面,那么系统就会给你发送“对方正在输入”的提示。2、在对话框中输入内容,也会显示“对方正在输入...”。
不同的微信小程序是怎么收费的?为何小程序一定要搭配G口大带宽使用? 现在我们生活中微信聊天程序出现的频率越来越高。 以前,小程序主要用于共享自行车和共享充电等共享产品,但越来越多的企业有开发小部件的需求,如房地产行业、商场行业、酒店行业等。 那么,制作小程序要花多少钱?
为什么企业要做小程序?企业级小程序需要什么服务器?微信小程序刚出来的时候,感觉不如之前说的好。很多人都有“唱不好”的态度。随着小程序开发的新功能开发,大家都是一种期待的态度。不仅人们的态度发生了变化,而且微信小程序不断开发的新功能也发生了变化。
小程序开发教程:本文为大家介绍了实现小程序登录与授权的方法,具有一定的参考价值,希望能对大家有所帮助。
小程序为不少商家带来了新的希望,也引发着商家们前赴后继地投身小程序的开发中,。说到开发,可能大部分朋友都觉得开发仅仅是在微信上操作,其实小程序开发涉及到很多方面,例如版式、图片、文案、功能、服务器等等。这就引出了一个问题了,小程序也需要服务器吗?需要怎么租用服务器合适呢?下面我们来看看。