微信小程序实现滚动回到顶部的两种方式
发布时间：2021-06-10 09:42 所属栏目：小程序开发教程
wxml页面：catchtap阻止冒泡事件。
- <view class="gotop" hidden='{{!cangotop}}'catchtap="goTop">
- <view>回到顶部</view>
- </view>
二、在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
- });
- },
