小程序返回顶部的两种方式是什么(小程序自定义顶部)

有两种方法可以让小程序返回到顶部，即:

(学习推荐:编程视频)

首先，使用视图表单返回到顶部

HTML:

ltimage src = # 39../../img/button -top . png # 39；class = # 39goTop # 39hidden = # 39{{!floorstatus } } # 39bindtap = goTop gt lt/image gt；CSS:

/*返回顶部*/。goTop { height:80 rpx；宽度:80rpx位置:固定；底部:50rpx背景:rgba(0，0，0，.. 3)；右:30rpx边框-半径:50%；}JS:

//获取滚动条在页面滚动上的当前位置:function(e){ console . log(e)if(e . scroll top >；100){ this . setdata({ floor status:true })；} else { this . setdata({ floor status:false })；}}，//返回顶部goTop: function (e) {//一键返回顶部if(wx . page rollto){ wx . page rollto({ scroll top:0 })} else { wx . show modal({ title: # 39；提示 # 39；，内容: # 39；微信当前版本太低，无法使用该功能。请升级到最新版本的微信，然后重试。'}}}}，二。使用scroll -视图的形式返回到顶部

ltscroll -view scroll -y scroll -top = # 39；{ { topNum } } # 39bindscroll = scrolltoupper gt ltimage src = # 39../../img/button -top . png # 39；class = # 39goTop # 39hidden = # 39{{!floorstatus } } # 39bindtap = goTop gt lt/image gt；CSS:

/*返回顶部*/。goTop { height:80 rpx；宽度:80rpx位置:固定；底部:50rpx背景:rgba(0，0，0，.. 3)；右:30rpx边框-半径:50%；}JS:

Data:{topNum: 0} //获取滚动条scrolltoupper的当前位置:function(e){ console . log(e)let t = e . detail . scroll top；if(t gt；100英镑。 ！This.data.floorstatus) {//避免重复setdata this . setdata({ floor status:true })；} if(t lt；= 100 this . data . floor status){ this . setdata({ floor status:false })；}}，//返回顶端goTop: function (e) {//一键返回顶端this . setdata({ top num:this . data . top num = 0 })；}，相关推荐:小程序开发教程。以上是小程序返回顶部有哪两种方式的细节。请多关注主机参考其他相关文章！

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

• 如何在迷你程序中实现浮动按钮（代码示例）（如何设置迷你程序浮动）逐步
• 如何为小程序配置2xml以完全支持Markdown！ （微型程序WXML调用方法）
• 什么是思维地图？ 如何使用F6在迷你程序中绘制思维地图？ （心理映射程序应用程序）
• 谈论如何在迷你程序和应用程序之间跳跃（迷你程序可以聊天和互动）
• 让我们谈谈在迷你程序中传输页面参数的一些方法

本文由主机参考刊发，转载请注明：小程序返回顶部的两种方式是什么(小程序自定义顶部) https://zhujicankao.com/80649.html