uniapp scroll-view回到底部

在UniApp中，可以使用scroll-view组件来实滚动视图，并且可以通过编程的方式将滚动视图回到底部。下面是一种实现方式：

1. 首先，在你的页面中引入scroll-view组件，并设置一个唯一的id，例如：

<scroll-view id="myScrollView" scroll-y="true" style="height: 100vh;">
  <!-- 内容区域 -->
</scroll-view>

2. 在页面的script标签中，使用uni.createSelectorQuery()方法获取scroll-view组件的实例，并将其保存在一个变量中：

export default {
  mounted() {
    this.$nextTick(() => {
      uni.createSelectorQuery().select('#myScrollView').boundingClientRect((rect) => {
        this.scrollView = uni.pageScrollTo({
          scrollTop: rect.height // 将滚动位置设置为scroll-view的高度，即回到底部
        });
      }).exec();
    });
  }
}

3. 这样，当页面加载完成后，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滚动到底部的代码：

在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滚动到底部的效果。