告别繁琐滑动，微信小程序一键回到顶部功能

前言

在日常使用微信小程序时，你是否曾经遇到过翻页疲劳的问题？或者在滑动页面时不断滑动才能回到顶部的尴尬情况？如果是这样，那么你一定不想错过今天的文章。我将为大家介绍一种简单而实用的方法，让你轻松实现 “一键回到顶部” 的功能，让你的微信小程序使用更加便捷舒适。

---

实现思路

其实微信小程序跟 vue 实现的原理都大差不差，不同的是微信小程序有自己的方法，通过调用 wx.pageScrollTo(Object object) 方法即可实现该操作。

---

wx.pageScrollTo(Object object)

该方法可实现将页面滚动到目标位置，支持选择器和滚动距离两种方式定位。

属性	描述
scrollTop	滚动到页面的目标位置，单位 px
duration	滚动动画的时长，单位 ms
selector	选择器
offsetTop	偏移距离，需要和 selector 参数搭配使用，可以滚动到 selector 加偏移距离的位置，单位 px
success	接口调用成功的回调函数
fail	接口调用失败的回调函数

如果你想要更深入的了解该方法，可查看 官方文档说明

---

话不多说，下面进入实操。

---

wxml 代码

catchtap是阻止冒泡事件

<view>
  <!-- 占位容器 -->
  <view wx:for="{{100}}">内容...</view>
  <!-- 回到顶部 -->
  <scroll-view scroll-y scroll-top='{{topNum}}' bindscroll="scrolltoupper">
    <view class="gotopBox" hidden='{{!cangotop}}' catchtap="goTopOn">⬆️</view>
  </scroll-view>
</view>

js 代码

const app = getApp()
Page({
    data: {
        data: {
            topNum: 0, //默认为0
            cangotop: false, //回到顶部控件默认隐藏
        }
    },

    // 获取滑动位置
    onPageScroll: function (e) {
        console.log("打印当前页面滚动的距离：", e.scrollTop)
        //当页面滑动距离大于一屏的高度时显示回到顶部控件
        this.setData({
            cangotop: e.scrollTop > wx.getSystemInfoSync().windowHeight ? true : false
        });
    },
    //回到顶部，内部调用系统API
    goTopOn: function (e) {
        if (wx.pageScrollTo) {
            wx.pageScrollTo({
                scrollTop: 0
            })
        } else {
            wx.showModal({
                title: '提示',
                content: '当前微信版本过低，暂无法使用该功能，请升级后重试。'
            })
        }
    }
})

css 样式

.gotopBox {
    position: fixed;
    right: 40rpx;
    bottom: 60rpx;
    font-size: 54rpx;
}

---

实现效果展示

---

相关推荐

⭐ vue实现一键回到顶部