uniapp实现瀑布流基本写法
大概的结构布局是这样呈现的先由最外层一个div包裹着左右等宽的div,左边的是index为奇数区,右边是index为偶数区,具体实现就是给每个区域添加v-if="index%2=1"或者v-if="index%2==0"这样就能让奇数区显示index为奇数的item,偶数区显示index为偶数的item.接下来实例是用图片来实现最基本的瀑布流布局(用到uview组件库的内置样式)<view
·
大概的结构布局是这样呈现的
先由最外层一个div包裹着左右等宽的div,
左边的是index为奇数区,右边是index为偶数区,具体实现就是给每个区域添加
v-if="index%2=1" 或者 v-if="index%2==0"
这样就能让奇数区显示index为奇数的item,
偶数区显示index为偶数的item.
接下来实例是用图片来实现最基本的瀑布流布局
(用到uview组件库的内置样式)
<view class="u-flex u-col-top u-border wrapper">
<view class= "box1 u-flex u-flex-wrap ">
<image class="u-border" src="https://picsum.photos/200/300" mode="widthFix"></image>
<image class="u-border" src="https://picsum.photos/200/200" mode="widthFix"></image>
<image class="u-border" src="https://picsum.photos/200/300" mode="widthFix"></image>
<image class="u-border" src="https://picsum.photos/200/400" mode="widthFix"></image>
<image class="u-border" src="https://picsum.photos/200/500" mode="widthFix"></image>
<image class="u-border" src="https://picsum.photos/200/600" mode="widthFix"></image>
</view>
<view class=" box2 u-flex u-flex-wrap">
<image class="u-border" src="https://picsum.photos/200/200" mode="widthFix"></image>
<image class="u-border" src="https://picsum.photos/200/500" mode="widthFix"></image>
<image class="u-border" src="https://picsum.photos/200/300" mode="widthFix"></image>
<image class="u-border" src="https://picsum.photos/200/300" mode="widthFix"></image>
<image class="u-border" src="https://picsum.photos/200/200" mode="widthFix"></image>
<image class="u-border" src="https://picsum.photos/200/400" mode="widthFix"></image>
</view>
</view>
再给左右俩去设置固定的宽度(针对的是等宽不等高的瀑布流)
.box1{
width: 200px;
}
.box2{
width: 200px;
}
这样就有一个基本的瀑布流呈现啦
更多推荐
已为社区贡献6条内容
所有评论(0)