uni-app在for循环中动态滚动到某个index上

2022-03-04  本文已影响0人  我是七月

我用到了uni.createSelectorQuery(),
官网地址:https://uniapp.dcloud.io/api/ui/nodes-info.html#createselectorquery

返回一个 SelectorQuery 对象实例。可以在这个实例上使用 select 等方法选择节点,并使用 boundingClientRect 等方法选择需要查询的信息。

Tips:

具体实现代码:

<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);
            },
上一篇下一篇

猜你喜欢

热点阅读