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. 数据备份与恢复 半持久化 全持久化 fork aof rdb Backing up Disaster recovery 备份 容灾

    Redis数据备份与恢复 - 流年晕开时光 - 博客园 https://www.cnblogs.com/deny/p/11531355.html Redis数据备份与恢复 Redis所有数据都是保存在 ...

  2. HDU1823 Luck ans Love 二维线段树

    Luck and Love HDU - 1823 世界上上最远的距离不是相隔天涯海角 而是我在你面前 可你却不知道我爱你                 ―― 张小娴 前段日子,枫冰叶子给Wiskey ...

  3. Spring5源码,@ModelAttribute

    一.什么是@ModelAttribute注解 二.@ModelAttribute注解相关代码详解 一.什么是@ModelAttribute注解 @ModelAttribute注解主要用来将请求转换为使 ...

  4. NFS服务、SSHD服务

    本章内容: NFS服务 SSHD服务 NFS服务 NFS(Network File System)即网络文件系统,用以在网络上与他人共享文件和目录:NFS是运行在应用层的协议:基于Client/Ser ...

  5. Cisco的互联网络操作系统IOS和安全设备管理器SDM__CDP

    1.CDP定时器和保持信息时间:通过show cdp 命令查看 show cdp neighbors命令提供下列信息:device ID(设备ID).local interface(本地接口).hol ...

  6. SignalR入坑笔记

    什么是SignalR ASP.NET Core SignalR 是一个开源库,它简化了向应用程序添加实时 web 功能的功能. 实时 Web 功能使服务器端代码能够即时将内容推送到客户端. ASP.N ...

  7. HDU6331 Problem M. Walking Plan【Floyd + 矩阵 + 分块】

    HDU6331 Problem M. Walking Plan 题意: 给出一张有\(N\)个点的有向图,有\(q\)次询问,每次询问从\(s\)到\(t\)且最少走\(k\)条边的最短路径是多少 \ ...

  8. AtCoder Beginner Contest 188 D - Snuke Prime (思维,差分)

    题意:你需要订阅一些服务,每个服务每天需要花费\(c_i\),要从第\(a_i\)用到第\(b_i\)天,你可以购买会员,会员每天需要花费\(C\),但是这天的服务不用再另花钱了,问你订阅这些服务的最 ...

  9. Codeforces Round #670 (Div. 2) A. Subset Mex (贪心)

    题意:给你一长度为\(n\)的序列,将其分为两个集合,求两个集合中未出现的最小元素的最大值, 题解:用桶存一下每个元素的个数,两次枚举\([1,100]\),找出两个最小值即可. 代码: int t; ...

  10. ApiPost V5 升级指南

    同旧版本相比,ApiPost V5 (以下简称V5)重新规划了底层架构,大大降低了内存使用率:并加入了大量新功能,用户体验也有了全新的提升.但是同旧版相比,很多使用方式有所不同,本文重点讲解以下用户升 ...