小程序scroll-view回到顶部的解决方案

对于小程序开发人员来说，处理scroll-view回到顶部的难题是一项常见的挑战，尤其是在处理多屏幕选项卡切换和二级菜单时。本文将深入探讨导致此问题的根源，并提供有效的解决方案。

理解问题

当用户在小程序中滑动scroll-view时，如果页面中包含多个屏幕，则scroll-view会跟随用户操作移动。然而，当用户切换到其他屏幕时，scroll-view会自动回到顶部。这是因为小程序默认的行为是在屏幕切换时重置scroll-view的滚动位置。

影响因素

导致scroll-view回到顶部问题的常见因素包括：

• 选项卡切换： 在多屏幕选项卡页面中，每个选项卡本质上是一个独立的页面，当切换选项卡时，小程序会将其视为新页面，从而触发scroll-view重置。
• 二级菜单： 当二级菜单位于scroll-view内时，点击二级菜单项也会触发scroll-view回到顶部。
• 其他页面操作： 在某些情况下，执行其他页面操作，例如显示模态窗口或切换导航栏，也可能导致scroll-view回到顶部。

解决方案

解决scroll-view回到顶部问题的方法主要有两种：

1. 禁用默认重置

通过在页面配置中禁用reset-scroll属性，可以阻止小程序在屏幕切换时重置scroll-view。以下代码示例展示了如何禁用默认重置：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "scroll-view": {
          "reset-scroll": false
        }
      }
    }
  ]
}

2. 手动控制滚动位置

当禁用默认重置无效或不可行时，可以手动控制scroll-view的滚动位置。以下是实现此目的的步骤：

• 在组件中定义一个scrollTop数据。
• 在页面加载时，将scrollTop数据设置为scroll-view的滚动位置。
• 在选项卡切换或执行其他操作时，将scrollTop数据更新为新的滚动位置。

以下代码示例展示了如何手动控制scroll-view的滚动位置：

Page({
  data: {
    scrollTop: 0
  },
  onLoad() {
    const query = wx.createSelectorQuery()
    query.select('#scroll-view').boundingClientRect()
    query.exec((res) => {
      this.setData({
        scrollTop: res[0].top
      })
    })
  },
  onTabChange(e) {
    this.setData({
      scrollTop: 0
    })
  }
})

---