美文网首页
uni-app在for循环中动态滚动到某个index上

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

作者: 我是七月 | 来源:发表于2022-03-04 10:14 被阅读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);
            },

相关文章

网友评论

      本文标题:uni-app在for循环中动态滚动到某个index上

      本文链接:https://www.haomeiwen.com/subject/ikuurrtx.html