微信小程序中如何制作瀑布流效果

微信小程序中如何制作瀑布流效果如图是

首先，页面布局，页面分为两个部分，左右各一部分，各自插入图片，页面代码如下：

<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

<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>

以上就是部分瀑布流的代码 整个具体的文件可以上我的github下载瀑布流demo地址

最后

以上就是想人陪牛排为你收集整理的微信小程序中如何制作瀑布流效果的全部内容，希望文章能够帮你解决微信小程序中如何制作瀑布流效果所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。