uniapp 聊天记录插入的两种方式

问题：历史消息记录添加后会不在之前浏览的地方

上拉加载加载添加的内容滚动条动(滚动条和顶部的距离变了) 显示的还是加载前的内容
下拉加载加载添加的内容滚动条没动(滚动条和顶部的距离没变) 显示的是新加载的内容

解决思路一滚动条距离顶部的高度

添加元素之前获取与底部的距离底部的距离 = 元素.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 聊天记录插入的两种方式相关推荐

mybatis中批量插入的两种方式(高效插入)
MyBatis简介 MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装.MyBatis可以使用 ...
mybatis 批量插入的两种方式
2019独角兽企业重金招聘Python工程师标准>>> 一.mybiats foreach标签 foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集合.fore ...
uni-app切换选项卡的两种方式
方法一.切换选项卡时,内容改变,内容的样式不同. 定义索引:默认选中选项一切换选项卡的索引方法这是效果方法二.切换选项卡时,内容改变,内容的样式相同. 定义导航栏选项和索引,默认第一个切换索引 ...
批量插入数据库语句java_java相关：MyBatis批量插入数据到Oracle数据库中的两种方式(实例代码)...
java相关:MyBatis批量插入数据到Oracle数据库中的两种方式(实例代码) 发布于 2020-7-22| 复制链接本文通过实例代码给大家分享了MyBatis批量插入数据到Oracle数据库 ...
js 原生将元素插入到父元素首位，jquery和原生两种方式
一般来说我们新加的元素会放置到父元素的首位但也有放到首位的那种可能,每次追加元素放到最前面业务还是有这种需求的可能用jquery的童鞋会对 append 这个方法很熟悉当然用框架 ...
uni-app.02.提交form表单的两种方式
提交form表单的两种方式 uni-app提交form表单的两种方式 form表单元素较少前端代码举例后端代码举例 form表单元素较多前端代码举例: 后端java代码举例 uni-app提交f ...
说一个奇奇怪怪的知识点，uniapp,公众号页面，uni.chooseImage只能相机或者相册选，不能同时使用两种方式sourceType:['camera','album']...
由于自身认为这是一个小功能,于是没怎么细心吧然后客户之前需要的是只能拍照上传,测试截图看到是有两种方式可选择的于是我改为了sourceType:['camera''] 一种方式上传.但是另一个选择 ...
Android中实现SQLite数据库CRUD操作的两种方式
Android中实现SQLite数据库CRUD操作的两种方式 SQLite是一款轻量级的关系型数据库,具有运行速度.占用资源少的特点.通常只需要几百KB的内存就够了,因此特别适合在移动设备上使用.SQ ...
mysql数据存储方式_数据存储在mysql的两种方式
数据存储在mysql的两种方式发布时间:2020-05-12 16:16:25 来源:亿速云阅读:250 作者:三月下文主要给大家带来数据存储在mysql的两种方式,希望这些内容能够带给大家实际 ...

uniapp 聊天记录插入的两种方式

问题：历史消息记录添加后会不在之前浏览的地方

解决思路一滚动条距离顶部的高度

解决思路二 scroll-into-view属性

uniapp 聊天记录插入的两种方式相关推荐

最新文章

热门文章

uniapp 聊天记录插入的两种方式

问题：历史消息记录添加后 会不在之前浏览的地方

解决思路一 滚动条距离顶部的高度

解决思路二 scroll-into-view属性

uniapp 聊天记录插入的两种方式相关推荐

最新文章

热门文章

问题：历史消息记录添加后会不在之前浏览的地方

解决思路一滚动条距离顶部的高度