微信小程序中滚动置顶效果-逐梦个人博客

负责维护的小程序最近需要做一个小优化，我们的一个详情页面有很多的图片展示，拉到底部后再想返回顶部有点麻烦，期望拉到某一个点后就会展示一个返回顶部按钮点击就可以直接返回顶部。

在网页中我们可以设置hash来直接返回顶部，不过这种没有滚动效果，也可以通过window.scrollTo来实现滚动置顶，显示的条件可以通过监听window的scroll事件再判断scrollTop的值来判断，在小程序中我们不能监听scroll事件，也无法scroll方法，但是微信为我们提供了类似的方法，页面滚动的scrollTop值我们可以从page的onPageScroll事件中获得，滚动到顶部我们可以通过wx.pageScrollTo方法来实现，该方法的使用方式详见：https://developers.weixin.qq.com/miniprogram/dev/api/ui/scroll/wx.pageScrollTo.html

下面我们看一下具体的实现代码：

test.js:

Page({
    data: {
        isShowScrollTop: false
    },
 
    onPageScroll: function(e) {
        const { scrollTop } = e;
        if (scrollTop >= 100) {
            this.setData({
                isShowScrollTop: true
            });
        } else {
            this.setData({
                isShowScrollTop: false
            });
        }
    },
 
    goTop: function() {
        wx.pageScrollTo({
          scrollTop: 0,
          duration: 300
        });
        this.setData({
            isShowScrollTop: false
        });
    }
});

其它的生命周期方法和事件这里没有写，实际开发中需要使用的请自行补上，另外显示置顶按钮的临界值，我试了一下100是比较合适的。另外wx.pageScrollTo实际开发中可能需要做低版本兼容。

test.wxml:

<view class="container"></view>
<view class="to-top" wx:if="{{isShowScrollTop}}" bindtap="goTop">返回顶部</view>

test.wxss:


.container {
    height: 1500rpx;
}
.to-top {
    position: fixed;
    bottom: 30rpx;
    right: 30rpx;
    width: 30rpx;
    text-align: center;
    border: 1rpx solid #ddd;
}

以上就是本文的全部内容，后面本博客会更新更多关于小程序开发方面的开启技巧以及避坑指南，记得持续关注本博客哦！