京东微信小程序瀑布流的效果：
分析结构
瀑布流可以看成是由一个个的小卡片左右分布组成
-
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组件
网友评论