利用scroll -视图组件实现小程序返回顶部的特效（小程序的scroll -视图下拉刷新）

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

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

通过滚动触发器事件从文档顶部获取scrollTop值。当达到某个条件[> 300]时，将显示gotop层。为该层编写一个click事件，并重置scroll-top值。偶尔发现一个设置scroll-top的bug。如果我下次设置的值和这个scroll-top值一样，那么文档就不会有任何动作。所以我做的是在0和1之间切换设置，如下所示:

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

页面({ data:{ test:& quot；"，scrollTop: { scroll_top: 0，goTop_show: false } }，scroll top fun:function(e){ console . log(e . detail)；if(e . detail . scroll top & gt；300) {//显示条件this . setdata({ &；#39;_ show & amp#39;:true })；console . log(this . data . scroll top)} else { this . setdata({ & amp；#39;_ show & amp#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({ & amp；#39;scrollTop.scroll_top&amp#39;:_ top })；控制台. log(& quot；----& quot；);console . log(this . data . scroll top)})最终效果图:

相关推荐:小程序开发教程

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

• 滚动-视图以完成列表页面的方法的详细说明（滚动-视图的用法）
• 浅析如何让scroll -视图在小程序中按指定位置滚动（微信小程序scrollview滚动到底部）
• 使用scroll-view组件实现小程序返回顶部的特效(小程序scrollview滚动到指定位置)。
• 浅析如何让scroll -视图在applet中按指定位置滚动(applet scroll-view)

本文由主机参考刊发，转载请注明：利用scroll -视图组件实现小程序返回顶部的特效（小程序的scroll -视图下拉刷新） https://zhujicankao.com/114986.html