1.createSelectorQuery无法获取节点宽高

业务场景: 列表需要在最后一页底部显示 ‘我是有底线的~’ 提示,但是如果数据只有一页且不占满屏幕的话,就不显示。需要判断 ‘我是有底线的~’ 这个节点距离顶部的top值是否超出screenHeight。
 
因为小程序有很多列表需要用到 ‘我是有底线的~’ ,所以把它封装组件。然后使用

//创建节点选择器
var query = wx.createSelectorQuery();
//选择id
var that = this;
query.select('.content').boundingClientRect(function (rect) {
console.log(rect)
}).exec();
 
结果返回 null !!!
期初以为是动态获取数据,创建节点的原因,获取不到节点。后测试选择定高节点也无法获得宽高,还用了 ref的方法,只能取到节点,无法获得宽高。
 
后来终于找到问题所在
 
 createSelectorQuery只能选择内置组件,不能选择自定义组件。
将 id 和对应的 query 逻辑放子组件里,自定义组件还需要把this.$scope传进去

父组件:

import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import Child from '../../components/child/child' export default class PageView extends Component {
render () {
return <View>
<Child></Child>
</View>
}
}

 

子组件:

import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components' export default class Child extends Component {
componentDidMount () {
const query = Taro.createSelectorQuery().in(this.$scope)
query.select('.line').boundingClientRect().exec(res => {
console.log(res);
})
} render() {
return (
<View class='line'>我是有底线的~</View>
)
}
}

 

2.

Taro 遇到的坑的更多相关文章

  1. Taro 开发踩坑指南 (小程序,H5, RN)

    Taro 开发踩坑指南 (小程序,H5, RN) css taro 如何展示多行文本省略号 https://www.cnblogs.com/xgqfrms/p/12569057.html UI 设计稿 ...

  2. 小程序 & taro 踩坑指南

    小程序 & taro 踩坑指南 微信开发者工具, 不支持 react bug https://github.com/NervJS/taro/issues/5042 solution just ...

  3. taro 填坑之路(三)taro 缓存

    1.taro 缓存 /** * 缓存数据 H5 小程序 * {food.id:{菜品信息 Num}, } */ import Taro from '@tarojs/taro'; // 取值 let s ...

  4. taro 填坑之路(一)taro 项目回顾

    (1)像素写法 PX -- 大写,否则会自动成rem (2)拿取列表第一条数据 let { activity:[firstItem] } = this.state; (3)使用props 需要设置默认 ...

  5. Taro踩坑记录一: swiper组件pagestate定制,swiperChange中setState导致组件不能滚动。

    import Taro, { Component } from '@tarojs/taro'; import { Swiper, SwiperItem, Image, View } from '@ta ...

  6. taro 填坑之路(二)taro 通过事件监听 实现组件间传值

    1.组件传值的方式 2.事件监听原理 3.事件管理器 utils/event.js /** * 事件池(事件管理器) * 通过事件监听传值 */ class Event { constructor() ...

  7. Taro 采坑日常

    组件事件传参只能在类作用域下的确切引用(this.handleXX || this.props.handleXX),或使用 bind. 组件中点击事件如下 // 组件 <AtListItem k ...

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

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

  9. taro Object(...) is not a function 版本更新后,H5端运行出错

    之前使用taro,版本号1.2.11 会有这样的问题,如下:gitHub找解决的,看到大佬们说更新一下版本就好了,果然更新后,此问题解决OK了. 当然,坑是走不完的,版本也更新挺快的,想着把taro和 ...

随机推荐

  1. 怎样理解 Vue 组件中 data 必须为函数 ?

    组件意在 复用 , 若为 对象, 则会相互干扰. 且 Vue 不允许此事发生, 规定必须为函数, 否则报错. 原理如下 对象 // 模拟创建组件 var Component= function() { ...

  2. Javascript——数据类型 和 注释

    数据类型:JavaScript中包括如下7种数据类型:字符串.数字.布尔.数组.对象.null.undefined 字符串: 注意:字符串类型的数据需要使用单引号或双引号引起来. 数字: 注意:Jav ...

  3. Bootstrap页面响应式设计

    关键词:viewport.栅格布局.媒体查询(Media Queries) 一.关于栅格布局的说明: 1.基本图解 extra small devices phones  超小型设备手机small d ...

  4. UVA10603Fill题解--BFS

    题目链接 https://cn.vjudge.net/problem/UVA-10603 分析 经典的倒水问题,直接BFS. 对于喜闻乐见的状态判重,一开始想来个哈希函数把一个三元组映射成一个数,后面 ...

  5. git、github常用操作

    1.将github项目拷贝到本地 $ git clone https://github.com/jim2500/miaosha_project.git 2.修改本地项目上传到github T470s@ ...

  6. fetch的文件流下载及下载进度获取

    下载过程中,获取进度,fetch API并没有提供类似xhr和ajax的 progress所以用 getReader()来循环读取大小 let size = 0; fetch( URL() + `/s ...

  7. K8S搭建过程随笔_证书CFSSL

    安装CFSSL mkdir -p /opt/k8s/cert && cd /opt/k8swget https://pkg.cfssl.org/R1.2/cfssl_linux-amd ...

  8. PAT Basic 1030 完美数列 (25 分)

    给定一个正整数数列,和正整数 p,设这个数列中的最大值是 M,最小值是 m,如果 M≤mp,则称这个数列是完美数列. 现在给定参数 p 和一些正整数,请你从中选择尽可能多的数构成一个完美数列. 输入格 ...

  9. Cubase如何进行音频移调

  10. NOIP2017 Day1 T3 逛公园

    NOIP2017 Day1 T3 更好的阅读体验 题目描述 策策同学特别喜欢逛公园.公园可以看成一张\(N\)个点\(M\)条边构成的有向图,且没有 自环和重边.其中1号点是公园的入口,\(N\)号点 ...