taro 获取dom节点信息

拼搏现实的明天。 2021-07-24 16:54 1883阅读 0赞

直接在生命周期函数中获取值为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