taro ref & wx.createSeletorQuery

https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html

https://nervjs.github.io/taro/docs/ref.html


const query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function(res){
res[0].top // #the-id节点的上边界坐标
res[1].scrollTop // 显示区域的竖直滚动位置
})

HTML query selector

https://wiki.developer.mozilla.org/en-US/docs/Web/API/Element/querySelector

https://wiki.developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll



taro ref & wx.createSeletorQuery的更多相关文章

  1. 关于在taro使用wx.parse那些事

    好久不见,好久没更新博客,最近工作也比较忙,今天在使用解决富文本的时候遇到两个bug,由于第一次使用wx.parse经验不足,走了很多弯路,今天特地把自己修复bug的感想分享一下,希望能帮助更多的小伙 ...

  2. Taro自定义Modal对话框组件|taro仿微信、android弹窗

    基于Taro多端实践TaroPop:自定义模态框|dialog对话框|msg消息框|Toast提示 taro自定义弹出框支持编译到多端H5/小程序/ReactNative,还可以自定义弹窗类型/弹窗样 ...

  3. Taro聊天室|react+taro仿微信聊天App界面|taro聊天实例

    一.项目简述 taro-chatroom是基于Taro多端实例聊天项目,运用Taro+react+react-redux+taroPop+react-native等技术开发的仿微信App界面聊天室,实 ...

  4. Taro 遇到的坑

    1.createSelectorQuery无法获取节点宽高 业务场景: 列表需要在最后一页底部显示 ‘我是有底线的~’ 提示,但是如果数据只有一页且不占满屏幕的话,就不显示.需要判断 ‘我是有底线的~ ...

  5. Taro开发微信小程序遇到的问题和解决方法

    1.scroll-view 置顶, 给设置scroll-top为0无效问题? 解决方案: 不触发置顶问题,需要给scroll-top一个设置接近0的随机数,Math.random() 2.scroll ...

  6. 小程序第三方框架对比 ( wepy / mpvue / taro )(转)

    文章转自  https://www.cnblogs.com/Smiled/p/9806781.html 众所周知如今市面上端的形态多种多样,手机Web.ReactNative.微信小程序, 支付宝小程 ...

  7. Taro 常用 API

    table th:first-of-type { width: 300px; } Taro 常用 API 说明 网址 Taro.getSystemInfoSync() 获取系统信息同步接口. http ...

  8. Taro 代码及功能,需要注意的地方

    Taro 代码不能使用的写法: 请注意无 AppID 关联下,调用 wx.operateWXData 是受限的, API 的返回是工具的模拟返回

  9. 小程序第三方框架对比 ( wepy / mpvue / taro )

      众所周知如今市面上端的形态多种多样,手机Web.ReactNative.微信小程序, 支付宝小程序, 快应用等,每一端都是巨大的流量入口,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端 ...

随机推荐

  1. Wireshark抓包参数

    目录 wireshark 抓包过滤器 一.抓包过滤器 二.显示过滤器 整理自陈鑫杰老师的wireshark教程课 wireshark 抓包过滤器 过滤器分为抓包过滤器和显示过滤器,抓包过滤器会将不满足 ...

  2. OAuth2.0与前端无感知token刷新实现

    前言 OAuth是一个关于授权(authorization)的开放网络标准,在全世界得到广泛的应用.Facebook.Twitter和Google等各种在线服务都提供了基于OAuth规范的认证机制. ...

  3. loj10001种树

    好久不写博客了,发现不好找做过和题!还得接着写啊! ------------------------------------------------------------------ 题目描述 某条 ...

  4. COGS 307 模拟退火

    307. [HAOI2006] 均分数据 ★★   输入文件:data.in   输出文件:data.out   简单对比时间限制:3 s   内存限制:128 MB [问题描述] 已知N个正整数:A ...

  5. java项目相对路径

    ./的含义: eclipse相对路径是相对项目的src目录来说的,而不是相对于当前文件. "./某某文件.txt" 而idea则相对于项目根目录 "./src/某某文件. ...

  6. eclipse项目放到github

    一,下载git ,配置用户名和邮箱: git config --global user.name "name"       git config --global user.ema ...

  7. Linux性能分析:生产环境服务器变慢,诊断思路和性能评估

    Linux性能分析:生产环境服务器变慢,诊断思路和性能评估 一.整机:top 二.CPU:vmstat 所有CPU核信息 每个进程使用CPU的用量分解信息 三.内存:free 四.硬盘:df 五.磁盘 ...

  8. brew更换国内源

    来源:清华大学开源软件镜像站(https://mirror.tuna.tsinghua.edu.cn/help/homebrew/) 替换现有上游 1 # brew 程序本身,Homebrew/Lin ...

  9. js创建map

    function Map() { var struct = function(key, value) { this.key = key; this.value = value; } var put = ...

  10. PA防火墙抓包结果显示重传(re-transmission)

    问题起因: 部分内网服务器调用外网站点抓取图片时出现缓慢及超时现象. 由于是由内向外方向的访问,且通过的应用层设备只有防火墙:而且用其他网段测试机测试的时候发现并没有上述访问缓慢或超时. 从防火墙抓包 ...