taro 获取dom节点信息

最新推荐文章于 2024-05-16 16:11:21 发布

神奇大叔

最新推荐文章于 2024-05-16 16:11:21 发布

阅读量7.6k

点赞数 1

分类专栏： Taro 文章标签： taro

本文链接：https://blog.csdn.net/weixin_43294560/article/details/108859105

版权

Taro 专栏收录该内容

27 篇文章 8 订阅

订阅专栏

本文介绍了在Taro的组件生命周期中如何使用 createSelectorQuery API 来延迟获取节点信息，以解决在组件渲染初期可能获取到null的问题。通过创建选择器、查询节点、获取DOM以及在滚动视图中的应用，详细展示了在实际开发中处理动态数据和布局计算的方法。

摘要由CSDN通过智能技术生成

直接在生命周期函数中获取值为null
	方式一:再加个延迟200毫秒的函数获取

1、创建选择器
	const query = Taro.createSelectorQuery();
	
	将选择器的选取范围更改为自定义组件component内.(初始时,选择器仅选取页面范围的节点，不会选取任何自定义组件中的节点)
	const query = Taro.createSelectorQuery().in(this);

2、查询
	获取单个
		query.select('选择器').boundingClientRect((res)=>{...})
	获取集合
		query.selectAll('选择器').boundingClientRect((res)=>{
		      rect.id      // 节点的ID
		      rect.dataset // 节点的dataset
		      rect.left    // 节点的左边界坐标
		      rect.right   // 节点的右边界坐标
		      rect.top     // 节点的上边界坐标
		      rect.bottom  // 节点的下边界坐标
		      rect.width   // 节点的宽度
		      rect.height  // 节点的高度
	    }).exec()
    
3、获取dom
	方式一:ref
    	ref只能修改,无法返回节点信息
    	
	方式二:目前支持Canvas的获取。
		query.select('选择器').node((res)=>{...})

4、在滚动视图中获取相关滚动数据
	节点必须是 scroll-view/ScrollView 或者 viewport，返回 NodesRef 对应的 SelectorQuery。
	   
	   query.select('选择器').selectViewport().scrollOffset(function(res){
	      res.id      // 节点的ID
	      res.dataset // 节点的dataset
	      res.scrollLeft // 节点的水平滚动位置
	      res.scrollTop  // 节点的竖直滚动位置
	    }).exec()

代码示例:

import Taro from '@tarojs/taro'
import {View,Text,Image} from '@tarojs/components'
import React,{Component} from 'react'

import './index.less'
/**
 * https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2209999056,1217794382&fm=26&gp=0.jpg
 * https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2418077635,996250637&fm=26&gp=0.jpg
 * https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2261944737,731173482&fm=26&gp=0.jpg
 * https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1874647665,1205912684&fm=26&gp=0.jpg
 * https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3152590946,2826023176&fm=26&gp=0.jpg
 * https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3975309943,373981693&fm=26&gp=0.jpg
 */

class Recommend extends Component{

    state={
        arr:[
            'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2209999056,1217794382&fm=26&gp=0.jpg',
            'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2418077635,996250637&fm=26&gp=0.jpg',
            'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2261944737,731173482&fm=26&gp=0.jpg',
            'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1874647665,1205912684&fm=26&gp=0.jpg',
            'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3152590946,2826023176&fm=26&gp=0.jpg',
            'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3975309943,373981693&fm=26&gp=0.jpg'
        ],
        initHeights:[]
    }

     _madeImage(str,index)
    {


        return <View className='.r-o'>
                <Image  src={str} />
                {
                    index%2==0?<View style='height:100px'>哇啦啦啦</View>:<View style='height:50px'>啦啦</View>
                }
            </View>
        
    }
    componentDidMount()
    {
 
        setTimeout(()=>{
            const query = Taro.createSelectorQuery()
            query.selectAll('.r-o').boundingClientRect((res)=>{
                
                this._getHeight(res,this.f.childNodes);
            }).exec()
        },200)

        }
        _getHeight=(nodes,childNodes)=>
        {

            let heights=[];
            nodes.forEach((item,index) => {
                if(index<2)
                {
                    heights.push(item.height);
                }else{
                        let min=Math.min.apply(null,heights);
                        let currentIndex=heights.indexOf(min);
                        let x=nodes[currentIndex].left;
                        let y=min;

                        childNodes[index].style.position='absolute';
                        
                        childNodes[index].style.left=x-10+'px';
                        childNodes[index].style.top=y+'px';

                        heights[currentIndex]=min+item.height;
                        
                }
            });
    }

    render()
    {
        const {arr}=this.state;
        return(

            <View className='r-c'>
                <Text className='r-t'>为你推荐</Text>
                <View className='r-i' id='ri' ref={(v)=>this.f=v} name='ww'>
                    {
                        arr.map((item,index)=>{
                           return this._madeImage(item,index);

                        })
                    }
                </View>
            </View>
        )
    }
}

export default Recommend