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

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

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

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

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

(学习推荐:编程视频)

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

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 });},相关推荐:小程序开发教程。以上是小程序返回顶部有哪两种方式的细节。请多关注主机参考其他相关文章!

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

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

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » 小程序返回顶部的两种方式是什么(小程序自定义顶部)
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!