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

2023-11-05

监听节点偏移量

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()
    },
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

  • 在网页上的文本框中键入内容时删除所有空格

    我如何在用户打字时即时删除输入到文本框中的空格 function var txt myTextbox var func function txt val txt val replace s g txt keyup func blur fun
  • jquery 验证错误位置

    这看起来很简单 但我无法弄清楚 我正在使用 jquery 验证插件 我验证所有文件 但我想要的是在输入文本行中显示验证消息警报 例如在电子邮件输入中 请填写电子邮件地址 但现在它出现在所有字段下 在我的html中
  • jQuery,REAL:不是等价的运算符?

    此代码行选择任何类名不是 id 和 quantity 的 div 内的所有子输入 div item gt div not id quantity gt input live keydown function event 执行相反操作的代码行
  • Ember.js 处理 View 事件后转换到路由

    Setup 我有一个 Ember 应用程序 支持使用 Imgur API 上传图像 我已经有一个工作路线和模板来处理任何 Imgur ID 但我想在上传新图像后转换到此路线 使用返回的 Imgur ID 这是该应用程序的相关部分 http
  • Leaflet js虚构地图

    我是 Leaflet 的新手 我想了解如何创建完全交互式的虚构地图 我有一张图像想要转换为传单地图 该图像基本上像图表一样具有许多连接和点 我想首先将该图像转换为地图 能够将鼠标悬停在这些点上 突出显示它们并显示有关它们的信息 并且还可以在
  • 在闪亮的数据表中为每个单元格显示工具提示或弹出窗口?

    有没有什么方法可以为 r闪亮数据表中的每个单元格获取工具提示 有很多方法可以获取悬停行或列 但我找不到一种方法来获取行和列索引并为每个单元格显示不同的悬停工具提示 任何人都可以修改以下代码吗 library shiny library DT
  • 未捕获的错误:找不到模块“jquery”

    我在用Electron https github com atom electron制作桌面应用程序 在我的应用程序中 我正在加载一个外部站点 Atom 应用程序之外 可以说http mydummysite index html http
  • 是否有任何非轮询方式来检测 DOM 元素的大小或位置何时发生变化?

    很长一段时间以来 我一直在寻找一种方法来检测 DOM 元素的大小或位置何时发生变化 这可能是因为窗口调整了大小 或者因为向该元素添加了新的子元素 或者因为在该元素周围添加了新元素 或者因为 CSS 规则已更改 或者因为用户更改了浏览器的字体
  • 使用 JS 合并具有相同值的相邻 HTML 表格单元格

    我已经为此苦苦挣扎了一段时间 我有一个根据一些 JSON 数据自动生成的表 该数据可能会有所不同 我想合并第一列中具有相同值的相邻单元格 例如此表中的 鱼 和 鸟 table tr td fish td td salmon td tr tr
  • 如何使JavaScript函数在Eclipse“大纲视图”中可见?

    我有这样的代码 但如果它在匿名函数中定义 则无法打开函数大纲 类没有问题 我该如何概述something2 请分享一些提示 我可以将所有函数标记为构造函数 但这是无效的方法 start of track event required deb
  • 如何将送货地址复制到帐单地址

    我想知道是否可以将送货地址复制到帐单地址 当用户单击与送货地址相同的复选框时 送货地址值将被复制到账单输入字段 我完成了大部分部分 但我不确定如何将选择菜单 状态 值复制到帐单地址 我真的很感谢任何帮助 My code document r
  • 将 javascript 整数转换为字节数组并返回

    function intFromBytes x var val 0 for var i 0 i lt x length i val x i if i lt x length 1 val val lt lt 8 return val func
  • Chartjs刻度标签位置

    尝试让 Y 轴刻度标签看起来像image https i stack imgur com XgoxX png 位于秤顶部且不旋转 缩放选项当前如下所示 scales yAxes id temp scaleLabel display true
  • 为什么“tbody”不设置表格的背景颜色?

    我在用 tbody 作为 CSS 选择器来设置background color在一个表中 我这样做是因为我有多个 tbody 表内的部分 它们具有不同的背景颜色 我的问题是 当使用border radius在细胞上 细胞不尊重backgro
  • 查询为空 Node Js Sequelize

    我正在尝试更新 Node js 应用程序中的数据 我和邮递员测试过 我的开发步骤是 从数据库 MySQL 获取ID为10的数据进行更新 gt gt 未处理的拒绝SequelizeDatabaseError 查询为空 我认识到 我使用了错误的
  • 如何在jquery中获取保存时间和当前时间的差异?

    我想在 javascript 或 jquery 中获取保存时间和当前时间之间的时差 我节省的时间看起来像Sun Oct 24 15 55 56 GMT 05 30 2010 java中的日期格式代码如下 String newDate 201
  • Select2 下拉列表动态添加、删除和刷新项目

    这让我发疯 为什么 Select2 不能在其页面上实现清晰的方法或示例如何在 Select2 上进行简单的 CRUD 操作 我有一个 select2 从 ajax 调用获取数据
  • Nodejs mysql 获取正确的时间戳格式

    我在用着mysqljs https github com mysqljs mysql得到结果后sql我变得不同TimeStamp格式如下 created at Sat Jul 16 2016 23 52 54 GMT 0430 IRDT 但
  • 如果数字小于 10,则显示前导零 [重复]

    这个问题在这里已经有答案了 可能的重复 JavaScript 相当于 printf string format https stackoverflow com questions 610406 javascript equivalent t
  • 使用异步调用时如何从 javascript 更新元刷新?

    我有一个系统 它使用元刷新来注销页面 该系统会在空闲用户后进行清理 不用担心 服务器也会导致会话超时 我开始通过 ajax 进行一些操作 不是真正的 xml 但这不是重点 我可以运行从异步请求返回的javascript 所以我想知道是否可以

随机推荐

  • openstack之neutron Local网络

    openstack之neutron Local网络 一 local网络介绍 二 修改neutron的相关配置文件 1 进入配置文件目录 2 备份配置文件 3 修改配置文件 三 重启服务 四 管理员创建local网络 1 创建网络 2 创建子
  • 机器学习西瓜书吃瓜笔记之(一)深入理解线性模型与logistics回归

    入门概念 机器学习两大基本问题 预期的输出是离散还是连续 回归问题 用多个变量拟合出一个连续值 分类问题 用多个变量拟合出一个离散值 机器学习三大理论 确定研究手段 传统监督学习 血糖预测 有无糖尿病预测 深度学习 自然语言处理 计算机视觉
  • hosts文件的作用以及hosts中多个ip映射一个域名地址的解析顺序

    hosts的作用 当我们访问网站时 要首先通过DNS服务器把网络域名 www xx com 解析成IP地址 我们的计算机才能访问 如果对于每个域名请求我们都要等待域名服务器解析后返回IP信息 这样访问网络的效率就会降低 而Hosts文件就能
  • 什么是copyonwrite容器

    开发十年 就只剩下这套Java开发体系了 gt gt gt CopyOnWrite容器即写时复制的容器 通俗的理解是当往一个容器添加元素的时候 不直接往当前容器添加 而是先将当前容器进行Copy 复制出一个新的容器 然后新的容器里添加元素
  • STK的2D二维采用的投影方式及osgEarth实现

    Spherical or Equirectangular projection 等距圆柱投影 球面投影 The equirectangular projection also called the equidistant cylindric
  • 【tkinter学习笔记 - 2】:Entry的使用、Button按钮的使用

    目录 一 Entry单行文本框 代码演示 Button按钮的使用 代码演示 一 Entry单行文本框 Entry用来接收一行字符串的控件 如果用户输入的文字长度长于 Entry 控件的宽度时 文字会自动向后滚动 如果想输入多行文本 需要使用
  • linux系统centos7使用 locate命令 查找文件

    百度找到都是whereis find这种 有时候搜不出来 发现locate非常好用
  • uni-app 设置APP应用跳转到系统设置页

    打开蓝牙设置 var main plus android runtimeMainActivity var Intent plus android importClass android content Intent var mIntent
  • Springboot整合Shiro实现登录认证

    一 概述 Shiro 是一个功能强大且易于使用的轻量级Java安全框架 包括身份验证 授权 加密及会话管理 使用Shiro易于理解的API 可以轻松地保护任何应用程序 二 Shiro主要组成 1 首先主要包括三大实体 Subject Rea
  • 优秀的测试工程师应该具备哪些素质

    人是测试工作中最有价值也是最重要的资源 只有保证测试工程师良好的素质 才能保证测试 产品的质量 然而 在有些公司让那些没有应聘上开发职位的人来做测试 这绝对是错误的 最终会损害企业 为高质高效地完成测试任务 软件测试工程师应具有很好的素质和
  • echarts设置y轴值间隔

    在标签yAxis 中 设置min max splitNumber 例如 min 0 max 1 splitNumber 10 呈现
  • 暴力破解漏洞

    0x01 漏洞描述 暴力破解漏洞 暴力破解的产生是由于服务器端没有做合理的限制 导致攻击者可以通过暴力的手段破解所需信息 如用户名 密码 验证码等 暴力破解的关键在于字典的大小 暴力破解需要一个庞大的字典 如4位数字的验证码 那么暴力破解的
  • MDK软件不能模拟仿真STM32F407的问题解决方法

    以下转载文章有点多 如有侵权请联系我删除哦 https blog csdn net weixin 49093913 article details 125362111 关于Keil MDK 5 仿真STM32F4报错no read perm
  • extjs html 指向网页,extjs-mvc结构实践(二):基本页面

    接着来 上一篇搭建了基本的项目骨架 到最后 其实啥也没看见 书接上回 开始写UI效果 目标 全屏显示 左侧导航菜单 右侧标签页切换操作内容区域 包含header和footer 导航菜单动态ajax产生 点击对应菜单可以动态加载js资源或者数
  • 基于小程序+SpringBoot制作一个音乐播放器

    此文主要实现在小程序内音乐播放功能 使用Java作为后端语言进行支持 界面友好 开发简单 一 小程序 1 1 项目创建 1 2 首页 轮播图 热门歌曲 iconfont图标引入 1 3 热门歌单 歌单首页 歌单详情 歌曲详情 1 4 个人中
  • 一些会导致Bundle安装失败的原因

    Bundle RequiredExecutionEnvironment中的值和可用的执行环境不符 缺少Bundle SymbolicName 重复的导入同一个package 导出或导入java 导出的package中必须的属性未定义 安装一
  • 几种前端h264播放器记录

    近期做了点工作记录一下 主要是将H264流在html5上进行播放 众所周知 大多数的 video组件都是支持FLV或者MP4以及m3u8格式的 而如果是WebRTC是直接集成好了 本次要求的环境主要是通过Websocket方式进行流传输 不
  • pandas 生成excel 和 csv

    import pandas as pd a a b c b 1 2 3 dit char a num b file path r output xlsx writer pd ExcelWriter file path df pd DataF
  • leaflet常用插件库

    1 常用地图切换加载 osm google baidu gaode tianditu etc https github com htoooth Leaflet ChineseTmsProviders 2 切片地图加载 wmts 支持矢量切片
  • 如何获取节点的方法,动态计算节点高度

    监听节点偏移量 onScroll e const scrollTop e detail 根据组件的高度 计算当前的区间在哪个位置 this data scrollIntoview this data activeKey this getAc