taro实现小程序端瀑布流

素颜马尾好姑娘i 2021-07-24 16:39 1033阅读 0赞

微信小程序暂时未发现如何获取dom,但能获取节点的信息
    
    taro端可通过ref获取到节点,但无法通过节点获取节点的相关信息

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 1]

代码示例:

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()
        { 
     		//200毫秒后获取节点信息,避免取值为null
    	    setTimeout(()=>{ 
    	        const query = Taro.createSelectorQuery()
    	        query.selectAll('.r-o').boundingClientRect((res)=>{ 
    	            // 第二个参数是通过ref获取到的瀑布流的每一个元素
    	            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()
        { 
            return(
    
                <View className='r-c'>
                    <Text className='r-t' id='f'>为你推荐</Text>
                    <View className='r-i' id='ri' ref={ (v)=>this.f=v} name='ww'>
                        { 
                            this.state.arr.map((item,index)=>{ 
                               return this._madeImage(item,index);
    
                            })
                        }
                    </View>
                </View>
            )
        }
    }
    
    export default Recommend

less:

.r-c{ 
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;    
    
    
        .r-t{ 
            width: 100%;
            font-weight: bold;
            margin: 20px;
            text-align: left;
            >Text{ 
                margin-left: 25px;
            }
        }
        .r-i{ 
            position: relative;
            .r-o{ 
                float: left;
                width: 320px;
                margin: 0 5px;
                border:solid 1px #ccc;
                >Image{ 
                    width: 100%;
                }
                .r-info{ 
                    display: flex;
                    flex-direction: column;
                    padding: 20px 20px;
                    >Text{ 
                        line-height: 50px;
                    }
                    >Text:nth-child(1)
                    { 
                        font-weight: bold;
                    }
                    >Text:nth-child(2)
                    { 
                        color:#ccc;
                        font-size: 25px;
                    }
                    >Text:nth-child(3)
                    { 
                        color:#F93841;
                    }
                }
            }
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200928222329602.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210724/b16fb430ebf84cad9340e43e8fddc69b.png