微信小程序实现瀑布流布局（一）

---

京东微信小程序瀑布流的效果：

分析结构

瀑布流可以看成是由一个个的小卡片左右分布组成

• 1.图片

• 2.标签(有些有)+文字说明

• 3.价格+标签(有些有)+看相似

• 4.大家都在买的热销商品

那么，电商中的瀑布流就是把一个个图片+解释说明(标题+标签+价格+详细说明)这两部分组成的一个组件，然后往它里面传数据，一个一个的渲染出来，那么我们不需要像京东的实现那么复杂，快速实现一个，效果如下：

这个组件的效果就是一个卡片

• 1.图片

• 2.标题

• 3.价格

• 4.详细说明

那么知道了卡片的基本布局，就先构建卡片的结构，就需要把这样的卡片写成一个组件component，当然组件中传值不一定要和我一样，看实际情况(后端返回的API)

代码如下：

// components/card/index.wxml
<view class="container">
 <!-- 图片 mode设置为自适应宽高比例，会根据图片的高度自动撑开-->
 <image mode="widthFix" class="img" src="{{data.image}}"></image>
 <!-- 图片下方作为一个整体 -->
 <view class="content-container">
 <!-- 标题 -->
 <text class="title">{{data.title}}</text>
 <!-- 价格 -->
 <view class="price-row">
 <l-price unit-size="24" size="28" color="#333333" value="{{data.count}}"></l-price>
 <l-price class="price-del" unit-size="22" size="26" deleted color="#C0C0C0" value="{{data.delCount}}"></l-price>
 </view>
 <!-- 说明 -->
 <text class="describe">{{data.describe}}</text>
 </view>
</view>

关于小程序组件的安装这里就不再赘述，这里使用到了价格组件price，在全局app.json导入：

那么卡片组件的wxss布局如下代码所示：

// components/card/index.wxss
.container {
 width: 340rpx;
 display: flex;
 flex-direction: column;
 box-shadow: 0px 0px 8px 0px rgba(119, 163, 149, 0.2);
 margin-bottom: 30rpx;
 background-color: #ffffff;
}
​
.img {
 width: 100%;
}
​
.content-container {
 display: flex;
 flex-direction: column;
 padding: 16rpx 16rpx 22rpx 16rpx; 
}
​
.title {
 font-size: 34rpx;
 color: #333333;
}
​
.price-row {
 display: flex;
 flex-direction: row;
}
​
.price-del {
 margin-left: 8rpx;
}
​
.describe {
 font-size: 32rpx;
 color: #888;
 font-weight: 300;
 margin-top: 6rpx;
}

那么，组件写好了，就要考虑传入的参数，它应该是一个Object：

// components/card/index.js
Component({
 /**
 * Component properties
 */
 properties: {
 data: Object
 },
 /**
 * Component initial data
 */
 data: {},
​
 /**
 * Component methods
 */
 methods: {
​
 },
​
})

既然组件的骨架和样式都写好了，那么我们就要在page页面中使用，这里我们使用到了一个瀑布流组件库water-flow，由于它只使用一次，所以我们在page的index.json文件中引入即可：

// "pages/home/index.json"
{
 "usingComponents": {
 "l-water-flow": "/miniprogram_npm/lin-ui/water-flow/index"
 }
}

那么卡片组件会再很多地方用到，所以我们在全局中app.json导入：

{
 "usingComponents": {
 "s-card": "./components/card/index"
 }
}

然后在page页面wxml中使用：

// "pages/home/index.wxml"
<view class="container">
 <l-water-flow generic:l-water-flow-item="s-card"/>
</view>

同时需要在js中调用：

// "pages/home/index.js"
wx.lin.renderWaterFlow(data)  // 这个data必须为一个数组对象

这时可以查看一下效果：

额，好像不太对，没有居中，那我们再设置下瀑布流的样式：

// "pages/home/index.wxss"
.container {
 margin-top: 20rpx;
 display: flex;
 flex-direction: column;
 align-items: center;
 padding-top: 30rpx;
 background-color: #ffffff;
}

再看下效果：

这效果好多了，剩下就是一些细节的调整了，下一章我们再来处理

使用组件：Lin-UI组件