详解微信小程序回到顶部的两种方式
程序员文章站
2023-11-18 12:45:34
在做微信小程序开发时,遇到一个问题,要如何实现返回顶部的功能,下面就用2种方法实现
一,使用view形式的回到顶部
html:
在做微信小程序开发时,遇到一个问题,要如何实现返回顶部的功能,下面就用2种方法实现
一,使用view形式的回到顶部
html:
<image src='../../img/button-top.png' class='gotop' hidden='{{!floorstatus}}' bindtap="gotop"></image>
css:
/* 返回顶部 */ .gotop{ height: 80rpx; width: 80rpx; position: fixed; bottom: 50rpx; background: rgba(0,0,0,.3); right: 30rpx; border-radius: 50%; }
js:
// 获取滚动条当前位置 onpagescroll: function (e) { console.log(e) if (e.scrolltop > 100) { this.setdata({ floorstatus: true }); } else { this.setdata({ floorstatus: false }); } }, //回到顶部 gotop: function (e) { // 一键回到顶部 if (wx.pagescrollto) { wx.pagescrollto({ scrolltop: 0 }) } else { wx.showmodal({ title: '提示', content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。' }) } },
二.使用scroll-view形式的回到顶部
<scroll-view scroll-y scroll-top='{{topnum}}' bindscroll="scrolltoupper"> <image src='../../img/button-top.png' class='gotop' hidden='{{!floorstatus}}' bindtap="gotop"></image>
css:
/* 返回顶部 */ .gotop{ height: 80rpx; width: 80rpx; position: fixed; bottom: 50rpx; background: rgba(0,0,0,.3); right: 30rpx; border-radius: 50%; }
js:
data:{ topnum: 0 } // 获取滚动条当前位置 scrolltoupper:function(e){ console.log(e) if (e.detail.scrolltop > 100) { this.setdata({ floorstatus: true }); } else { this.setdata({ floorstatus: false }); } }, //回到顶部 gotop: function (e) { // 一键回到顶部 this.setdata({ topnum: this.data.topnum = 0 }); },
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: ABBYY FineReader 14怎么给PDF文件添加图片?
下一篇: 七牛多文件压缩