滚动到底部的最直接的方法
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、注意
-
scroll-with-animation值为false会导致容器动态计算高度时，滚动异常 -
scroll-top缺点，当聊天记录少时，可能出现不满页也出现滚动过的现象
