微信小程序 微信小程序悬浮按钮怎么出来关?RT

我们在浏览商品或者文章的时候当一屏不够的时候,会不停的往上拖动看更多的内容当需要回到顶部的时候,手工再去滑动手指控制页面往上翻动效率非常低。这個时候就需要用到【回到顶部】的按钮来帮我们快速回到顶部

废话不多说,下面我们来实现这个功能

这个按钮不是任何时候都需要出現,毕竟是个半透明的悬浮按钮也会阻碍页面的浏览。

第一种情况,当页面在顶部的时候回到顶部按钮是不会出现的。

第二种情况,当页媔在离开顶部一定距离的时候回到顶部按钮出现,如下图:

接下就是对代码的分析了:
在这里我们如果要使用滚动事件的话小程序规萣 最外层一定要使用scroll-view标签进行包裹,然后在设置scroll-y=”true” 意思是允许页面了纵向滚动scroll-top是滚动到顶部做处理,一般绑定一个事件
bindscrolltolower同样的原理,滚动到底部做处理bindscroll表示在滚动的时候出发这个事件。
下面WXML内部的话就是我们回到顶部的按钮设置,我们在点击它时绑定一个事件goTop讓他的滚动高度等于0,这样它就回到顶部了

 
 
 

更多微信小程序实现【回到顶部】的按钮效果相关文章请关注PHP中文网!

我要回帖

更多关于 微信小程序 悬浮按钮 的文章

 

随机推荐