uniapp scroll-view滚动到底

在uniapp中，可以使用scroll-view组件来实现滚动到底部的功能。可以通过设置scroll-into-view属性或scroll-top属性来实现。

- 使用scroll-into-view属性：
您可以在scroll-view组件上设置scroll-into-view属性，将其绑定到一个具有相应id的组件上，以使scroll-view滚动到特定的组件位置。例如，在scroll-view上设置scroll-into-view="bottomId"，其中bottomId是一个变化的id值，可以与要滚动到的组件的id值相对应。同时，还需要确保scroll-view具有明确的高度。这种方法可以在H5上有效。

- 使用scroll-top属性：
另一种方法是使用scroll-top属性来实现。您可以在scroll-view组件上设置scroll-top属性，将其绑定到一个变量scrollTopHeight上。通过更改该变量的值，可以将scroll-view滚动到指定的高度。同样，需要确保scroll-view具有明确的高度。这种方法在微信小程序上也有效。

例子代码如下：

<scroll-view scroll-y="true" style="height: 400rpx;" :scroll-into-view="bottomId" scroll-with-animation="true">
  <view v-for="(item,index) in list">
    <view :style="'height: 180rpx; background-color:' + item.color"></view>
  </view>
  <view :id="'p' + list.length">底部</view>
</scroll-view>

或

<scroll-view scroll-y="true" style="height: 400rpx;" :scroll-top="scrollTopHeight" scroll-with-animation="true">
  <view v-for="(item,index) in list">
    <view :style="'height: 180rpx; background-color:' + item.color"></view>
  </view>
</scroll-view>

请注意，使用scroll-into-view或scroll-top属性时，需要确保scroll-view组件具有明确的高度，并且相应的id或变量值与要滚动到的组件一致。此外，在更改scroll-top属性值时，您可以使用setTimeout方法来延迟更改变量的值，以确保页面渲染完成后再滚动。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [uniapp关于scroll-view一直自动滚动到底部的功能](https://blog.csdn.net/u010513497/article/details/120321441)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]