uni-app在for循环中动态滚动到某个index上
2022-03-04 本文已影响0人
我是七月
我用到了uni.createSelectorQuery()
,
官网地址:https://uniapp.dcloud.io/api/ui/nodes-info.html#createselectorquery
返回一个
SelectorQuery
对象实例。可以在这个实例上使用select
等方法选择节点,并使用boundingClientRect
等方法选择需要查询的信息。
Tips:
- 使用
uni.createSelectorQuery()
需要在生命周期mounted
后进行调用。 - 默认需要使用到
selectorQuery.in
方法。
具体实现代码:
<view class="main_box" v-for="(item,index) in submitData.assemblyList" :key="index">
<view class="list_view" :class="'PTX_Ex_'+index">
</view>
</view>
我的业务场景是新增一个view到最下面,然后页面滚动到新增的view上。
所以是滚动到最后一个组
// 滚动到最后一个组
pageScrollToLast() {
let index = this.submitData.assemblyList.length - 1;
var query = uni.createSelectorQuery();
var timer = setTimeout(function() {
uni.createSelectorQuery().select(".main_box").boundingClientRect(data => { //目标节点
query.select('.PTX_Ex_' + index).boundingClientRect(res => {
uni.pageScrollTo({
duration: 0, //过渡时间必须为0,uniapp bug,否则运行到手机会报错
scrollTop: res.top - data
.top, //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
})
}).exec()
}).exec();
clearTimeout(timer);
}, 300);
},