详解微信小程序回到顶部的两种方式
在做微信小程序开发时,遇到一个问题,要如何实现返回顶部的功能,下面就用2种方法实现
一,使用view形式的回到顶部
HTML:
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形式的回到顶部
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 }); },
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。