如何获取节点的方法,动态计算节点高度

监听节点偏移量

onScroll(e) {
        const {
            scrollTop
        } = e.detail;
        // 根据组件的高度,计算当前的区间在哪个位置
        this.data.scrollIntoview = "";
        this.data.activeKey = this.getActiveKey(scrollTop);
        this.setData(this.data);
    },``
```javascript

动态获取节点,进行计算

createSelectorQuery 方法
查询请求 : boundingClientRect

 onReady: function () {
        // 拿到查询器
        const query = this.createSelectorQuery();
        //通过class 查询组件  ,给一个查询的请求,boundingClientRect 把回调函数交给他,最后执行
        query.selectAll(".comm-card").boundingClientRect(rect => {
            //console.log(rect);
            // 封装方法 (判断逻辑)
            this.getActiveKey = top => {
                //初始值为0 
                let start = 0,
                    end = 0,
                    activeKey = 0;
                // 迭代,用some 方法,some 可以中断迭代, 其他方法会继续执行
                rect.some((item, index) => {
                    // 比对节点信息
                    start = end;
                    end = end + item.height;  //加第一个区间     
                    const isStop = top >= start && top < end;
                    activeKey = index + 1;
                    return isStop
                });
                return activeKey;
            }
        }).exec() // 执行   exec()
    },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值