VPS参考测评推荐
专注分享VPS主机优惠信息
衡天云优惠活动
华纳云最新优惠促销活动
jtti最新优惠促销活动
新罗云最新优惠促销活动

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

locvps
主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

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

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

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

a97a722201c8bc13bbe15e0e5042576.png

通过滚动触发器事件从文档顶部获取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)} })最终效果图:

be2b7c5e853a88468b7f02c37deb695.png

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

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

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

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » 使用scroll-view组件实现小程序返回顶部的特效(小程序scrollview滚动到指定位置)。
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!