浅析小程序中怎么让scroll-view按照指定位置滚动

小程序中scroll-view基本用法

在很多小程序中，我们都会使用到<scroll-view>标签，这是因为此标签可以让我们在小程序中实现滚动效果。关于这个标签的基本用法，我们来看一下下面的代码：

<scroll-view style="height: 200px;" scroll-x="true">

  <view>item1</view>
  <view>item2</view>
  <view>item3</view>
  <view>item4</view>
  <view>item5</view>
  <view>item6</view>
  <view>item7</view>
  <view>item8</view>
  <view>item9</view>
  <view>item10</view>
</scroll-view>

上面的代码展示了一个横向滚动的<scroll-view>标签，其中通过<view>标签加入了10个子元素，每次横向滚动时会在水平方向滚动一个子元素的长度，同时scroll-x="true"表示启用横向滚动。（也可以使用scroll-y="true"启用纵向滚动）

我们通过设置height属性可以限定<scroll-view>的高度，这样可以控制滚动区域的大小，同时可以使用CSS设置样式来改变滚动内容的样式。

控制<scroll-view>的滚动位置

使用<scroll-view>标签我们已经可以实现基本的滚动效果，但是在某些应用场景下，我们需要在代码中控制<scroll-view>的滚动位置，这时我们可以使用小程序提供的接口来实现。

1. 使用CSS控制滚动位置

通过设置CSS属性scroll-top/scroll-left控制<scroll-view>的滚动位置。

我们可以使用CSS控制<scroll-view>的滚动位置，通过设置scroll-top/scroll-left属性，分别控制纵向和横向滚动。例如以下代码：

<scroll-view style="height: 200px;" scroll-y="true" id="scroll-wrapper">

  <view>item1</view>
  <view>item2</view>
  <view>item3</view>
  <view>item4</view>
  <view>item5</view>
  <view>item6</view>
  <view>item7</view>
  <view>item8</view>
  <view>item9</view>
  <view>item10</view>
</scroll-view>
<button bindtap="scrollToTop">scrollToTop</button>
<button bindtap="scrollToBottom">scrollToBottom</button>
<button bindtap="scrollToSomeWhere">scrollToSomeWhere</button>

Page({

  data: {},
  onLoad: function () {},
  scrollToTop() {
    wx.createSelectorQuery().select('#scroll-wrapper').boundingClientRect().exec(function (rect) {
      wx.pageScrollTo({
        scrollTop: rect[0].top
      })
    })
  },
  scrollToBottom() {
    wx.createSelectorQuery().select('#scroll-wrapper').boundingClientRect().exec(function (rect) {
      wx.pageScrollTo({
        scrollTop: rect[0].bottom
      })
    })
  },
  scrollToSomeWhere() {
    wx.createSelectorQuery().select('.scroll-item').boundingClientRect().exec(function (rect) {
      wx.pageScrollTo({
        scrollTop: rect[0].top
      })
    })
  }
})

上面的代码中，我们为<scroll-view>设置了id="scroll-wrapper"属性，以便后续使用wx.createSelectorQuery().select('#scroll-wrapper')获取滚动区域的信息。同时我们绑定了三个按钮对应不同的方法：

scrollToTop方法可以实现将页面滚动到<scroll-view>的顶部

scrollToBottom方法可以实现将页面滚动到<scroll-view>的底部

scrollToSomeWhere方法可以实现将页面滚动到指定元素的位置

不过使用CSS的方式来控制滚动位置有一个明显的缺点，就是只能跳到指定的位置，无法实现平滑的滚动效果。如果我们需要实现平滑的滚动效果，那么我们可以使用小程序提供的API。

2. 使用API控制滚动位置

通过使用wx.pageScrollTo()API实现平滑滚动。

wx.pageScrollTo()是小程序提供的一个API，它可以实现平滑的滚动效果，我们可以通过设置scrollTop/scrollLeft属性来设置滚动的位置。比如下面这个例子：

Page({

  data: {},
  onLoad: function () {},
  scrollToSomeWhere() {
    wx.createSelectorQuery().select('.scroll-item').boundingClientRect().exec(function (rect) {
      wx.pageScrollTo({
        scrollTop: rect[0].top,
        duration: 300
      })
    })
  }
})

在上面的代码中，我们使用wx.createSelectorQuery()获取到指定元素的信息，然后使用wx.pageScrollTo()API实现平滑的滚动效果。其中通过设置duration属性来控制滚动的速度。

总结

通过上述两种方式，我们可以在小程序中实现任意位置的滚动效果。不过需要注意的是，如果想要使用API实现平滑的滚动效果，那么我们需要在合适的时机调用API，否则无法实现想要的效果。同时，由于小程序有一些限制，我们也不能在所有地方都使用API实现平滑的滚动效果，需要根据实际情况来选择合适的方式。