小程序中如何制作瀑布流效果
这个是我做的瀑布流的效果，如果想要这样效果的可参考下。
首先在微信开发者工具的页面中写出来这种两列的格式，左边一部分右边一部分，代码如下：
<view>
<view>
<scroll-view scroll-y="true" bindscrolltolower="loadMore" >
<view>
<view wx:for="{{trips}}" wx:for-item="item" wx:key="" >
<template is="m-history" wx:if="{{index%2==0}}" data="{{ trip : item}}" />
</view>
</view>
<view>
<view wx:for="{{trips}}" wx:for-item="item" wx:key="">
<template is="m-history" wx:if="{{index%2==1}}" data="{{ trip : item}}" />
</view>
</view>
</scroll-view>
</view>
</view>
样式代码如下：
/**index.wxss**/
.city_history{
margin-top:10px;
padding-top:5px;
border-top:1px #dadada solid;
}
.history_content{
clear:both;
overflow: hidden;
width:100%;
}
.history_content .left,.history_content .right{
width:49%;
}
.history_content .left{
float:left;
}
.history_content .right{
float:right;
}
.history_item{
display: inline-block;
background:#fff;
margin-bottom: 20px;
border-radius: 10px;
width:100%;
}
.item-img{
width:100%;
border-radius: 10px 10px 0 0 ;
}
.item-title{
padding:10px;
font-size: 14px;
font-family: ‘PingFang SC-Medium‘;
color: #1e1e1e;
}
.item-ava{
width: 35px;
height: 35px;
border-radius: 100%;
float:left;
margin-right:10px;
}
.history_auth_name{
padding:0 0 10px 10px;
}
.name-title{
font-size:12px;
font-family: ‘PingFang SC-Medium‘;
color: #1e1e1e;
display: block;
}
外部的components代码如下：
<!--conponents/history.wxml-->
<text>conponents/history.wxml</text>
<template name="m-history">
<view>
<image src="{{trip.cover_image}}" mode="widthFix"></image>
<view>
<view url="url">{{trip.name}}</view>
</view>
<view>
<image src="{{trip.cover_image_default}}"></image>
<text>{{trip.desc}}</text>
<text>2018-12-1</text>
</view>
</view>
</template>
以上就是部分瀑布流的代码 整个具体的文件可以上我的github下载https://github.com/chengwenxia1100/pbl
小程序中如何制作瀑布流效果