使用scroll-view组件实现小程序返回顶部的特效(小程序scrollview滚动到指定位置)。

我们在浏览网页的时候，经常会用到“一键回顶”的功能，这个功能可以让我们非常方便的回到网页的顶部。尤其是一些比较长的网页，没有这个功能，简直不可想象。那么如何在小程序中实现这个功能呢？

这里有一个applet可以实现的组件，就是scroll-view组件，它有很多属性，其中我们要用以下两个属性来处理:

通过滚动触发器事件从文档顶部获取scrollTop值。当满足某些条件[>: 00]时，显示gotop层，并为此层重置scroll-top值。无意中发现了一个设置scroll-top的bug。如果我下次设置的值和这个scroll-top值一样，那么文档就不会有任何动作。所以我的方法是在0和1之间切换设置，如下所示:

ltscroll -视图样式= 身高:100%；"scroll -y = ；true scroll -top = ；{ { scroll top . scroll _ top } } ；bindscroll = scrollTopFun gt lt视图样式= 身高:11111rpx边框:纯色1px红色；" gt123456 ----{ { test } } lt；/view gt； lt/scroll -view gt； lt视图样式= 位置:绝对；底部:50rpx右:30rpx宽度:120rpx身高:120rpx边框:纯色1px绿色；"wx:if = ；{ { scrollTop.goTop _ show } } catchtap = goTopFun gt lt/view gt；JS:

页面({ data:{ test: ；"，scrollTop: { scroll_top: 0，goTop_show: false } }，scroll top fun:function(e){ console . log(e . detail)；if(e . detail . scroll top gt；00){//触发gotop的显示条件this . setdata({ # 39；scrollTop.goTop _ show # 39:true })；console . log(this . data . scroll top)} else { this . setdata({ # 39；scrollTop.goTop _ show # 39:false })；} }，gotop fun:function(e){ var _ top = this . data . scroll top . scroll _ top；//发现设置的scroll-top值不能和最后一个值相同，否则无效，所以这里增加了一个判断if(_ top = = 1){ _ top = 0；} else { _ top = 1；} this . setdata({ # 39；scroll top . scroll _ top # 39；:_ top })；控制台. log( ；---- ；);console . log(this . data . scroll top)} })最终效果图:

推荐:小程序开发教程。以上是利用scroll-view组件实现小程序回顶特效的详细内容。请多关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 如何实现小程序发送服务通知（小程序如何主动向用户发送通知）
• 如何获取小程序的unionid（如何获取小程序的页面路径）
• 生成海报的示例小程序（Java后端）（微信小程序生成海报演示）
• 什么是小程序？ 有哪些功能？（什么是小程序？有哪些功能？）
• 介绍如何用小程序生成参数二维码（二维码+小程序参数）

本文由主机参考刊发，转载请注明：使用scroll-view组件实现小程序返回顶部的特效(小程序scrollview滚动到指定位置)。 https://zhujicankao.com/79909.html