uniapp + vue 定位聊天最新消息 实现滚动条一直在元素的最底部

使用 scroll-view 配合uni.createSelectorQuery() 以及boundingClientRect()即可实现；

		
				
					
						{{item.msg}}:{{globalUser.name}}
					
					
						{{name}}:{{item.msg}}
					

				
		
		

使用生命周期函数

        mounted() {
			uni.createSelectorQuery().select("#gundong").boundingClientRect((res) => {
				this.oldbottom = res.bottom // 记录 滚动 元素的 bottom 值
				console.log(this.oldbottom)
			}).exec();
		},
		updated() {
			setTimeout(() => {
				uni.createSelectorQuery().select("#gundong").boundingClientRect((res) => {
					console.log(res)
					var newbottom = res.bottom
					if (Number(newbottom) > Number(this.oldbottom)) {
						this.scrollTop = newbottom
					}
					this.oldbottom = newbottom
					console.log(this.oldbottom)
				}).exec();
			}, 400)

		},

		created() {
			const res = uni.getSystemInfoSync(); //获取手机可使用窗口高度     api为获取系统信息同步接口
			this.style.pageHeight = res.windowHeight;
			this.style.contentViewHeight = res.windowHeight - uni.getSystemInfoSync().screenWidth / 750 * (30) - 60; //像素   因为给出的是像素高度 然后我们用的是upx  所以换算一下 
			this.scrollToBottom(); //创建后调用回到底部方法
		},

一定要加 setTimeout(() => {},400 ) 这样消息才会最下面 

好像是让页面全部加载完毕之后  只能自己通过 定时 达到异步的效果

看了好多博客 总是差一点  最后结合了 好几篇的结果

 

样式的话 自己写下吧  我用了全局样式