京東微信小程序瀑布流的效果：
分析結構
瀑布流可以看成是由一個個的小卡片左右分布組成
1.圖片
2.標簽(有些有)+文字說明
3.價格+標簽(有些有)+看相似
4.大家都在買的熱銷商品
那么，電商中的瀑布流就是把一個個圖片+解釋說明(標題+標簽+價格+詳細說明)這兩部分組成的一個組件，然后往它里面?zhèn)鲾祿砣唬粋€一個的渲染出來，那么我們不需要像京東的實現那么復雜命爬，快速實現一個，效果如下：
這個組件的效果就是一個卡片
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;
}
再看下效果：
這效果好多了蚪腋，剩下就是一些細節(jié)的調整了，下一章我們再來處理
使用組件：Lin-UI組件
