taro实现小程序端瀑布流
微信小程序暂时未发现如何获取dom,但能获取节点的信息taro端可通过ref获取到节点,但无法通过节点获取节点的相关信息效果图:代码示例:import Taro from '@tarojs/taro'import {View,Text,Image} from '@tarojs/components'import React,{Component} from 'react'import './ind
·
微信小程序暂时未发现如何获取dom,但能获取节点的信息
taro端可通过ref获取到节点,但无法通过节点获取节点的相关信息
效果图:
代码示例:
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;
}
}
}
}
}
更多推荐
已为社区贡献7条内容
所有评论(0)