uniapp scroll-view 滚动到底部 代码

您好，以下是uniapp scroll-view滚动到底部的代码：

在wxml文件中：

<scroll-view scroll-y="true" scroll-into-view="{{toView}}" scroll-with-animation>
  <view id="upper"></view>
  <view id="scroll-view-item-{{index}}" wx:for="{{list}}" wx:key="{{item.id}}">
    <!--内容部分-->
  </view>
  <view id="lower"></view>
</scroll-view>

在js文件中：

data: {
    list: [], // 列表数据
    toView: '', // 滚动位置
},
methods: {
  onReachBottom() { // 滚动到底部加载更多数据
    // TODO：加载更多数据
    const length = this.data.list.length - 1
    this.setData({
        toView: `scroll-view-item-${length}` // 设置滚动位置
    })
  }
}

如此即可实现scroll-view滚动到底部的效果。

相关问题

uniapp scroll-view滚动到底部

在uniapp中，要将scroll-view滚动到底部，可以使用scroll-into-view属性和scrollIntoIndex变量。在scroll-view组件上添加scroll-into-view属性，将其绑定到scrollIntoIndex变量。然后，将scrollIntoIndex变量设置为聊天数据数组的最后一条数据的id，这样scroll-view就会自动滚动到最后一条聊天记录的位置。

示例代码如下：

<scroll-view scroll-y="true" class="main-scroll" :scroll-into-view="scrollIntoIndex" :scroll-with-animation="true">
  <view v-for="(item, index) in chatData" :key="index" :id="'chatItem_' + index">
    <chat-item :userId="clientInfoData.userId" :item="item" ref="chatItem" @previewImage="previewImage"></chat-item>
  </view>
</scroll-view>

请注意，要确保聊天组件的id设置为'chatItem_' + index，这样才能正确地将scroll-into-view属性与聊天记录关联起来。

uniapp scroll-view 滚动到底部 怎么实现

要实现 uniapp scroll-view 滚动到底部，你可以使用以下几种方法：

1. 使用 scrollTop 属性：可以通过设置 scrollTop 的值为 scroll-view 最大滚动距离（scroll-view content 的高度减去 scroll-view 的高度），从而让 scroll-view 滚动到底部。

2. 使用 selectComponent 方法：首先给 scroll-view 组件设置唯一的 id，然后通过 selectComponent 获取到 scroll-view 组件实例，再调用 scrollIntoView 方法，把 scroll-view content 中最后一个元素滚动到可视区域。

3. 监听 scrolltolower 事件：当 scroll-view 滚动到最底部时会触发 scrolltolower 事件，可以在事件处理函数中执行相应的滚动操作。

以上是实现 uniapp scroll-view 滚动到底部的三种方法，具体使用哪种方法取决于你的需求和实际情况。