uniapp-scroll-view自动定位到元素底部

scrollview每次获取信息之后自动顶到最下面，类似于聊天框的模式。

首先我们需要拿到的是我们需要将信息框定位到那里，怎么获取这个数据呢

我们使用

			<scroll-view style="height: 300px;" scroll-y="true" :scroll-top="scroll" @scroll="scrolls"
				:show-scrollbar="true" class="border" id="boxx">
				<!-- 放这里扫完之后，不能到最下面 -->
				<view id="boxOnshow">
					<!-- 放这里不一定能定位到最下面 -->
					<view v-for="(item,index) in listCode" class="flexs">
						<view class="W1s" style="width: 42%; margin-right: 10rpx;">{{item.projectName}}</view>
						<view class="W2s" style="width: 42%;">{{item.projectModel}}</view>
						<view class="W3s" style="width: 16%; text-align:right;margin-right: 10rpx;">{{item.goodsNumber}}
						</view>
					</view>
				</view>
			</scroll-view>

定义id，通过id获取元素节点的信息，因为会有上面注释的问题，所以我们把两种情况结合起来使用。

1.配合id可以取到相应的元素信息，然后修改this.scroll。每次进入页面打开的时候都定位到最下面,使用这个方法.

onShow() { //回来之后在调一下接口，吧数据刷新一下
			this.getmodel('boxx')
		},
methods: {
	getmodel(boxOnshow) { //id
				var that = this
				uni.showLoading({
					title: '加载中'
				});
				uni.request({
					url: "http://192.168.10.19:8081/order/getModel",
					method: "POST",
					header: {
						"Authorization": uni.getStorageSync('token') //自定义请求头信息
					},
					success(res) {
						that.listCode = res.data.data
						console.log(that.listCode)
						uni.hideLoading()
						that.$nextTick(() => {
							//必须先创建SelectorQuery对象的实例，该实例用来查询DOM节点的信息
							const query = uni.createSelectorQuery()
							//匹配选择器的第一个节点,selectAll匹配选择器的所有节点
							query.select(`#${boxOnshow}`).boundingClientRect(rect => {
								//rect是包含元素大小、位置等数据的对象
							}).exec((s) => {
								//节点信息获取成功后执行的回调函数
								// console.log(s, "S")
								that.scroll = s[0].bottom //距离底部多少像素
								console.log(s[0], "高度")
							})
						})
					}
				})

			}
}

 scrollview的属性，可以参考uniapp文档查看

在data中定义scroll属性。

data() {
 return {
scroll: 0,
 }
}

大功告成。

可以在生命周期中使用。也可以在方法中使用.