一,在view形式下滚动后回到顶部
JS代码片段：
// 获取滚动条当前位置 onPageScroll: function (e) { console.log(“打印当前页面滚动的距离=”+e) console.log(e) if (e.scrollTop > 100) {//页面距离大于100px,则显示回到顶部控件 this.setData({ cangotop: true }); } else { this.setData({ cangotop: false }); } }, //回到顶部，内部调用系统API goTop: function (e) { // 一键回到顶部 if (wx.pageScrollTo) {// //wx.pageScrollTo(OBJECT)// 基础库 1.4.0 开始支持，低版本需做兼容处理// 将页面滚动到目标位置。// OBJECT参数说明：// 参数名类型必填说明// scrollTopNumber是滚动到页面的目标位置（单位px）// durationNumber否滚动动画的时长，默认300ms，单位 ms wx.pageScrollTo({ scrollTop: 0 }) } else { wx.showModal({ title: '提示', content: '当前微信版本过低，暂无法使用该功能，请升级后重试。' }) } },css样式：该控件放置于右下角。
.gotop{position:fixed;right:30rpx;bottom:50rpx;height:60rpx;width:100rpx;display:flex;flex-direction:row;align-items:center;justify-content:center;text-align:center;color:white;font-size:21rpx;font-weight:bold;background:#a78e72;}wxml页面：catchtap阻止冒泡事件。
<view class="gotop" hidden='{{!cangotop}}'catchtap="goTop"> <view>回到顶部</view></view>2，在scroll-view形式下回到顶部
<scroll-view scroll-y scroll-top='{{topNum}}' bindscroll="scrolltoupper"><view class="gotop" hidden='{{!cangotop}}'catchtap="goTop"> <view>回到顶部</view></view> </scroll-view>JS页面代码段:
data:{ topNum: 0 } // 获取滚动条当前位置 scrolltoupper:function(e){ console.log(e) if (e.detail.scrollTop > 100) { this.setData({ cangotop: true }); } else { this.setData({ cangotop: false }); } }, //回到顶部 goTop: function (e) { // 一键回到顶部 this.setData({ topNum:0 }); },
