uniapp的scroll-view动态设置滚动条位置

你可以使用 `uni.createSelectorQuery()` 方法获取到 `scroll-view` 组件的实例，然后使用 `scrollIntoView()` 方法将滚动条滚动到指定位置。

例如，假设你有一个 `scroll-view` 组件的 `id` 为 `my-scroll-view`，你想将滚动条滚动到第 10 个子组件的位置，你可以这样写：

uni.createSelectorQuery().select('#my-scroll-view').boundingClientRect(function(rect){
  // 计算出第 10 个子组件的位置
  var top = rect.top + 10 * rect.height;
  // 将滚动条滚动到指定位置
  uni.pageScrollTo({
    scrollTop: top,
    duration: 300
  });
}).exec();

上面的代码中，`uni.createSelectorQuery().select('#my-scroll-view').boundingClientRect()` 用于获取 `scroll-view` 组件的位置信息，然后计算出第 10 个子组件的位置，最后使用 `uni.pageScrollTo()` 方法将滚动条滚动到指定位置。其中，`duration` 参数表示滚动动画的持续时间，单位为毫秒。

相关问题

uniapp scroll-view 获取滚动条位置

UniApp 的 `scroll-view` 组件可以用于创建可滚动的区域，并获取其滚动条的位置。你可以通过监听滚动事件并访问 `scroll-y` 或 `scrollTop` 属性来获取当前滚动到的距离。以下是基本的步骤：

1. 首先，在需要获取滚动位置的组件中，添加一个 `scroll-view` 组件，比如这样：

<view class="scroll-view" @scrolltoupper="onScrollToUpper" @scrolltolower="onScrollToLower">
  <!-- 内容 -->
</view>

2. 然后，在对应的 Vue 文件中，声明这两个方法：

export default {
  methods: {
    onScrollToUpper() {
      const scrollView = this.$refs.scrollView;
      if (scrollView) {
        const scrollTop = scrollView.scrollTop; // 滚动条顶部距离顶部的距离
        console.log('滚动条位置：', scrollTop);
      }
    },
    onScrollToLower() {
      // 类似地，处理滚动到底部的事件
    },
  },
}

这里的 `$refs.scrollView` 是对 `scroll-view` 组件的引用，`scrollTop` 是滚动条的垂直位置。

uniapp scroll-view实现自动滚动

要实现 `scroll-view` 的自动滚动，可以使用 `setInterval` 方法和 `scroll-view` 的 `scroll-top` 属性。具体实现方法如下：

1. 在 `scroll-view` 标签中添加 `scroll-top="{{scrollTop}}"` 属性，用于绑定滚动条的位置。

2. 在 `data` 中定义 `scrollTop` 和 `intervalId` 变量，分别用于存储滚动条的位置和定时器的 ID。

3. 在 `onLoad` 生命周期函数中，调用 `setInterval` 方法，设置定时器每隔一段时间执行一次滚动操作。

4. 在定时器中，先判断当前滚动条的位置是否已经到达底部，如果到达底部则将滚动条位置设置为 0，否则将滚动条位置加上一个适当的值，使其向下滚动。

下面是实现代码示例：

<scroll-view scroll-y="true" scroll-top="{{scrollTop}}">
  <!-- 内容区域 -->
</scroll-view>

Page({
  data: {
    scrollTop: 0, // 滚动条位置
    intervalId: null // 定时器 ID
  },
  onLoad: function() {
    // 开启定时器，每隔 3 秒执行一次滚动操作
    this.data.intervalId = setInterval(() => {
      // 判断当前是否到达底部
      wx.createSelectorQuery().select('.scroll-view').boundingClientRect((rect) => {
        if (rect.bottom <= wx.getSystemInfoSync().screenHeight) {
          this.setData({
            scrollTop: 0
          });
        } else {
          // 每次滚动 20px
          this.setData({
            scrollTop: this.data.scrollTop + 20
          });
        }
      }).exec();
    }, 3000);
  },
  onUnload: function() {
    // 清除定时器
    clearInterval(this.data.intervalId);
  }
});

在上面的代码中，通过 `wx.createSelectorQuery().select('.scroll-view').boundingClientRect((rect) => {...})` 获取 `scroll-view` 的位置信息，判断是否到达底部。如果到达底部，则将滚动条位置设置为 0；否则将滚动条位置加上一个适当的值，使其向下滚动。在页面销毁时，清除定时器，避免内存泄漏。