問題：歷史消息記錄添加后 會不在之前瀏覽的地方

• 上拉加載 加載添加的內容 滾動條 動(滾動條和頂部的距離變了) 顯示的還是加載前的內容
• 下拉加載 加載添加的內容 滾動條 沒動(滾動條和頂部的距離沒變) 顯示的是新加載的內容

解決思路一 滾動條距離頂部的高度

• 添加元素之前獲取與底部的距離 底部的距離 = 元素.scrollHeight - 元素.scrollTop
• 添加元素之后元素的滾動條高度 scrollTop = 元素.scrollHeight - 底部的距離
• 元素滾動上去的距離就是現在的總高度減去剛剛的固定底部

<template><view class="content"><!-- 主體部分 --><view class="main"><scroll-view scroll-y="true" :upper-threshold="a":scroll-top="sTop"@scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower" @scroll="scroll"><view class="loading"><text>沒有更多數據了</text></view><view v-for="(item,index) in list" :id="'a_'+index" :key="index">{{item.id}}</view></scroll-view></view></view> </template><script>import AppHeader from "@/components/app-header.vue";export default {components: { AppHeader },data() {return {a: 100, // 觸發頂部加載方法的距離 可不寫 默認50sTop: '0', // 滾動條的位置list: [{id:1},{id:2},{id:3},{id:4}]};},created() {this.newScrollHeight = 0; // 記錄新的高度this.oldScrollHeight = 0; // 記錄原先的高度this.scrollTop = 0; // 記錄 底部的距離},methods: {scrolltoupper: function(e) {let arr = []for(let i = -1; i >= -4; --i){arr.unshift({id: this.list[0].id-1 + i})}// this.list.concat(arr)this.list.unshift(...arr);this.scrollIntoIndex = `a_${20}`},/*** 問題：* 上拉加載 加載添加的內容 滾動條 動(滾動條和頂部的距離變了) 顯示的還是加載前的內容* 下拉加載 加載添加的內容 滾動條 沒動(滾動條和頂部的距離沒變) 顯示的是新加載的內容* 解決思路：* 與上拉加載反過來， 那就是保證滾動條與底部的距離不變* 添加元素之前獲取與底部的距離 底部的距離 = 元素.scrollHeight - 元素.scrollTop* 添加元素之后元素的滾動條高度 元素.scrollTop = 元素.scrollHeight - 底部的距離* * 元素滾動上去的距離就是現在的總高度減去剛剛的固定底部* scrollHeight: 滾動條總高度 scrollTop: 滾動條距離頂部的高度* */scroll: function(e) {const SCROLL_HEIGHT = e.target.scrollHeight; // 當前的滑動區域高度const SCROLL_TOP = e.target.scrollTop; // 滾動條位置this.newScrollHeight = SCROLL_HEIGHT;if(this.oldScrollHeight==0) {this.oldScrollHeight = this.newScrollHeight;}if(this.newScrollHeight != this.oldScrollHeight) {this.scrollTop = this.oldScrollHeight - SCROLL_TOP; // -> 計算之前滾動條離底部的距離this.sTop = this.newScrollHeight - this.scrollTop; // -> 計算滾動條因在什么位置this.oldScrollHeight = this.newScrollHeight;}}},} </script><style lang="scss"> // 主體部分 .content {background-color: $uni-bg-color;.main {// padding: 0 $uni-spacing-row-base;// box-sizing: border-box;scroll-view {width: 100%;height: 100%;overflow-anchor: auto;vertical-align: middle;display: flex;flex-direction: column-reverse;view {padding: 0 $uni-spacing-row-base;box-sizing: border-box;}view:nth-child(n) {width: 100%;height: 200rpx;background-color: antiquewhite;}view:nth-child(2n) {width: 100%;height: 250rpx;background-color: aqua;margin-top: 10rpx;}.loading {width: 100%;height: 60rpx !important;}}} } </style>

解決思路二 scroll-into-view屬性

scroll-into-view屬性 具體情況請看官方文檔 uniapp scroll-view標簽

<template><!-- 聊天頁面 --><view class="content"><!-- 主體部分 --><view class="main"><scroll-view scroll-y="true":scroll-top="scrollTop":scroll-anchoring="true"@scrolltoupper="scrolltoupper" :scroll-into-view="scrollIndex"><view class="loading"><text>沒有更多數據了</text></view><view v-for="(item,index) in list" :id="'id_'+ item.id" :key="index">{{item.id}}</view></scroll-view></view></view> </template><script>export default {data() {return {scrollTop: '0',scrollIndex: "",list: [{id:1},{id:2},{id:3},{id:4},]};},created() {this.first = 'id_1';// 不在created中調用的給方法的話 第一次觸頂 不會被定位 可以去掉這句 取updated中打印下scrollIndex 第一次觸頂 只會渲染更新一次 之后都會更新兩次this.scrolltoupper();},methods: {scrolltoupper: function(e) {let arr = [];this.first = `id_${this.list[0].id}`;for(let i = -1; i >= -4; --i){arr.unshift({id: this.list[0].id-1 + i})}this.list.unshift(...arr);// 此處用 nextTick 是因為需要保證 頁面以及渲染完成 也可以在 updated 鉤子中執行賦值// 沒有中一句的話不會定位到之前的位置this.$nextTick(()=>{this.scrollIndex = this.first;})}},} </script><style lang="scss"> // 主體部分 .content {background-color: $uni-bg-color;.main {// padding: 0 $uni-spacing-row-base;// box-sizing: border-box;scroll-view {width: 100%;height: calc(100% - 0rpx);overflow-anchor: auto;vertical-align: middle;display: flex;flex-direction: column-reverse;view {padding: 0 $uni-spacing-row-base;box-sizing: border-box;}view:nth-child(n) {width: 100%;height: 200rpx;background-color: antiquewhite;}view:nth-child(2n) {width: 100%;height: 250rpx;background-color: aqua;margin-top: 10rpx;}.loading {width: 100%;height: 60rpx !important;}}} } </style>

總結

以上是生活随笔為你收集整理的uniapp 聊天记录插入的两种方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。