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.