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.