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>

    )

  }

}

巴特西

Taro 遇到的坑

最新文章

热门文章