网站管理系统,郑州网络营销策划,技术支持 东莞网站建设 轴承,设计广告设计uniapp 效果是模拟发送聊天信息#xff0c;需要scrollview在收到新消息时滚动到底部最新的位置
项目是vue2的#xff0c;代码如下
// 第一种 高度固定值
scrollToBottom(selector) {this.$nextTick(() {const dom uni.createSelectorQuery().in(this).select(selecto…uniapp 效果是模拟发送聊天信息需要scrollview在收到新消息时滚动到底部最新的位置
项目是vue2的代码如下
// 第一种 高度固定值
scrollToBottom(selector) {this.$nextTick(() {const dom uni.createSelectorQuery().in(this).select(selector)dom.scrollOffset(({scrollHeight}) {// 这个this.scrollTop 是data中的变量 控制srcollView的滚动距离 500为滚动元素的高度this.scrollTop scrollHeight - 500}).exec()})
}// 第二种 高度动态获取
// 不建议这种写法
// 嵌套获取可以获取到元素的实际高度 避免固定的数值 但是由于嵌套操作dom存在严重的性能问题
// 可以通过boundingClientRect先获取到后存储为变量再scrollOffset进行使用来解决
scrollToBottom(selector) {this.$nextTick(() {const dom uni.createSelectorQuery().in(this).select(selector)dom.boundingClientRect(({height}) {dom.scrollOffset(({scrollHeight}) {// 这个this.scrollTop 是data中的变量 控制srcollView的滚动距离 this.scrollTop scrollHeight - height}).exec()}).exec()})
}使用时直接传入scrollview的选择器即可 使用示例
scroll-view :scroll-topscrollTop scroll-ytrue classscroll-Y charRecord!-- 聊天信息 --
/scroll-viewonFetchMessage(){// 接收到信息 放入列表this.scrollToBottom(.charRecord) // .charRecord 是 scroll-view 的类名
}如果恰好你需要隐藏scrollview的滚动条那就可以加上这个代码
在App.vue中添加
style langscss/*每个页面公共css */scroll-view ::-webkit-scrollbar {display: none !important;width: 0 !important;height: 0 !important;-webkit-appearance: none;background: transparent;}::-webkit-scrollbar {display: none;}
/style
