美文网首页
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