Taro 遇到的坑

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.