這個是我做的瀑布流的效果，如果想要這樣效果的可參考下酌畜。
首先在微信開發(fā)者工具的頁面中寫出來這種兩列的格式，左邊一部分右邊一部分，代碼如下：
<view class="city_history">
<view class="history_content">
?? ? ? ?<scroll-view scroll-y="true"? style="height: {{ windowHeight }}px; width: {{ windowWidth }}px;" bindscrolltolower="loadMore" >
? ? ? ? ? <view class="left">
? ? ? ? ? ? ?<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 class="right">
? ? ? ? ? ? <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" class="history_item">
? <view class="history_item">
? ? <image class="item-img" src="{{trip.cover_image}}" mode="widthFix"></image>
? ? <view class="item-title-box">
? ? ? <view url="url" class="item-title">{{trip.name}}</view>
? ? </view>
? ? <view class="history_auth_name">
? ? ? <image class="item-ava" src="{{trip.cover_image_default}}"></image>? ?
? ? ? <text class="name-title">{{trip.desc}}</text>
? ? ? <text class="name-title">2018-12-1</text>
? ? </view>
? </view>
</template>
以上就是部分瀑布流的代碼 整個具體的文件可以上我的github下載https://github.com/chengwenxia1100/pbl
