话不多说直接上干货:
现在component中创建一个waterfull的文件夹,并创建对应的wxml,wxss,jx,json文件
wxml:
javascript
<view class="content">
<view class="content-left">
<block wx:for="{{list}}" wx:key="list" wx:if="{{index % 2 == 0}}">
<view class="content-item" bindtap="detail" data-v="{{item}}">
<image src="{{item.image}}" class="content-item-img" mode="widthFix" />
<view class="content-item-box">
<view class="content-item-title">{{item.title}}</view>
<view class="content-item-name">
<view class="flex-row">
<view style="color:#808080">{{item.info}}</view>
<view style="height:10rpx"></view>
</view>
</view>
</view>
</view>
</block>
</view>
<view class="content-right">
<block wx:for="{{list}}" wx:key="list" wx:if="{{index % 2 == 1}}">
<view class="content-item" bindtap="detail" data-v="{{item}}">
<image src="{{item.image}}" class="content-item-img" mode="widthFix" />
<view class="content-item-box">
<view class="content-item-title">{{item.title}}</view>
<view class="content-item-name">
<view class="flex-row">
<view style="color:#808080">{{item.info}}</view>
<view style="height:10rpx"></view>
</view>
</view>
</view>
</view>
</block>
</view>
</view>
item.xxx这些东西根据自己的需求进行定义
wxss:
css
.content {
display: flex;
justify-content: space-around;
}
.content-left,
.content-right {
width: 49%;
}
.content-item {
margin: 10rpx auto 20rpx;
background: #fff;
width: 98%;
border-radius: 20rpx;
overflow: hidden;
}
.content-item-img {
width: 100%;
}
.content-item-box {
width: 95%;
margin-left: 2.5%;
font-size: 24rpx;
color: #333;
padding: 5rpx;
box-sizing: border-box;
}
.content-item-title {
/* 一行省略 */
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
font-size: 16px;
font-weight: 500;
}
.content-item-name {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20rpx;
font-size: 22rpx;
}
js:
javascript
//index.js
Component({
properties: {
list: {
type: Array,
defaultValue: []
}
},
methods: {
//wxml中绑定的事件在此处定义
}
});
使用瀑布流的页面,在其json文件中先引人
javascript
{
"navigationBarTitleText": "",
"usingComponents": {
"waterfull": "/component/Waterfull/Waterfull",
}
}
wxml页面使用组件
html
<waterfull list="{{list}}"></waterfull>
{{list}}为要传过去的数组对象也就是需要生成瀑布流的数据