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. 【Mybatis】Mapper接口的参数处理过程

    下面是一个简单的Mapper接口调用,首先同个session的getMapper方法获取Mapper的代理对象,然后通过代理对象去调用Mapper接口的方法 EmployeeMapper mapper ...

  2. HTML5之动画优化(requestAnimationFrame)

    定时器setInterval实现的匀速动画为什么不是匀速? window.requestAnimationFrame() 一.定时器setInterval实现的匀速动画为什么不是匀速? 以上提问并非通 ...

  3. Swift调用微信支付宝SDK(Swift4.0)

    1.第一步在程序入口注册微信  (支付宝不需要) func application(_ application: UIApplication, didFinishLaunchingWithOption ...

  4. sqoop 安装

    Sqoop是一款开源的工具,主要用于在Hadoop(Hive)与传统的数据库(mysql.postgresql...)间进行数据的传递,可以将一个关系型数据库(例如 : MySQL ,Oracle , ...

  5. JavaMaven【二、目录结构&HelloMaven】

    目录结构 Demo: 1.创建目录结构 2.编写hello maven以及对应的test,放到对应目录下 package com.shane.maven01.model; public class H ...

  6. How to mount remote Windows shares

      Contents Required packages Basic method Better Method Even-better method Yet Another Even-better m ...

  7. MySQL查询多行重复数据SQL

    1 详见如下 SELECT day_time,`city_code`,count(1) as num FROM t_user_register_analyse GROUP BY `day_time`, ...

  8. centos 7 源代码搭建部署 zabbix-4.0.13 LTS

    Zabbix 官网 >:https://www.zabbix.com/download 源代码地址>:https://www.zabbix.com/cn/download_sources# ...

  9. urllib.parse:很底层,但是是一个处理url路径的好模块

    介绍 urllib.parse是为urllib包下面的一个模块,urllib的其它模块完全可以使用requests替代.但是urlli.parse我们是有必要了解的,因为该模块下面有很多操作url路径 ...

  10. Mysql(四)-2:多表查询

    一 介绍 本节主题 多表连接查询 复合条件连接查询 子查询 准备表 #建表 create table department( id int, name varchar(20) ); create ta ...