uniapp：scroll-view

滚动到底部的最直接的方法

1、使用 scroll-into-view 属性

• uniapp 模板

<scroll-view  :scroll-into-view="state.into" scroll-with-animation scroll-y style="height: 100%;">
  <view v-for="(rc, ind) in state.records" :key="rc.id" :id="`id_${rc.id}`">
    <view>{{rc.text}}</view>
    <view style="height: 60rpx;" id="id_iii"></view>
  </view>
</scroll-view>

• 初始化、动态设置不同的 state.into 值

数组、容器【滚动区高度、宽度】变化时
值不变不会滚动

state.into = state.into == 'id_iii' ? `id_${state.records[state.records.length - 1].id}` : 'id_iii'

2、使用 scroll-top 属性

• uniapp 模板

<scroll-view :scroll-top="state.scrollTop" scroll-with-animation scroll-y style="height: 100%;">
  <view v-for="(rc, ind) in state.records" :key="rc.id" class="item">
      <text style="color:#FF0036;padding: 10rpx;font-size: 16px;"></text>
    </button>
    <view class="item-content">{{rc.text}}</view>
  </view>
</scroll-view>

• 初始化、动态设置 state.scrollTop 的值为当前时间戳（绝不重复，绝对够大）

const state = reactive({
  scrollTop: new Date().getTime()
})

3、注意

1. scroll-with-animation 值为false 会导致容器动态计算高度时，滚动异常
2. scroll-top 缺点，当聊天记录少时，可能出现不满页也出现滚动过的现象