1. 介绍
微信小程序商城是一个非常常见的应用场景，而特卖商品的流式布局也是商城开发中常见的需求，本文将介绍如何通过动态API实现特卖商品的流式布局。
2. 相关知识
在介绍如何通过动态API实现特卖商品的流式布局之前，我们需要了解一些相关的知识。
2.1 布局方式
在开发过程中，我们使用的是wxml来进行界面布局。特卖商品的布局方式一般有两种：
瀑布流布局
流式布局
其中，瀑布流布局是一种常见的商品展示方式，它可以让商品按照一定的规则排列，能够更好地呈现商品的特色。而流式布局，则更加自由灵活，能够让商品展示更具有个性。
2.2 动态API
在商品展示的过程中，我们需要从后台获取商品的数据。这里，我们使用动态API来获取商品信息。动态API是指在小程序运行时，程序自动生成API地址，通过请求这个地址获取后台数据。相对于静态API，动态API的优点是可以动态修改API的地址和参数，从而实现更加灵活的数据获取。
2.3 特卖商品
特卖商品是指在一定的时间范围内，通过折扣等手段促销的商品。在商城开发中，特卖商品常常需要与普通商品区别开来，以突出其促销价值，通常会通过标签或者样式来进行区分。
3. 实现
在了解了相关的知识之后，我们可以开始实现特卖商品的流式布局。
3.1 页面结构
首先，我们需要在wxml中定义页面结构。由于特卖商品的数量往往比较多，所以我们通过scroll-view来实现滚动效果。在scroll-view中，我们定义了一个grid来存放所有的商品。
<scroll-view class="scroll-view" scroll-y="{{true}}" style="height:{{scroll_height}}px">
<!--商品列表-->
<view class="grid">
<block wx:for="{{goods_list}}" wx:key="{{index}}">
<view class="item {{item.is_sale}}">
<view class="img-box">
<image src="{{item.img}}" mode="aspectFill"></image>
</view>
<view class="info-box">
<view class="name">{{item.name}}</view>
<view class="price">
<view class="price-left"></view>
<view class="price-right">￥{{item.price}}</view>
</view>
<view class="tag {{item.type}}" wx:if="{{item.type}}">{{item.type}}</view>
</view>
</view>
</block>
</view>
</scroll-view>
在grid中，我们使用了wx:for来遍历商品列表。对于每一个商品，我们使用了一个item类来包含商品的图片、名称、价格和标签等信息。其中，is_sale类用于区分特卖商品和普通商品，如果该商品是特卖商品，则is_sale为'sale'，否则为''。
3.2 样式布局
接下来，我们需要在wxss中定义样式，来实现商品的流式布局。在样式中，我们通过flex布局来实现流式布局。这里，我们给grid添加了一个display:flex的属性，然后给item添加了一个flex属性，即可实现商品的流式排列。
.grid{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 10px;
}
.item{
width: 48%;
background-color: #fff;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
3.3 数据获取
最后，我们通过动态API获取商品数据。在小程序中，我们可以通过wx.request来发送HTTP请求，从而获取商品数据。这里，我们假设后台API的地址为'http://api.com/goods/list'，并通过GET方法来获取数据。获取数据之后，我们使用setData方法将数据保存到页面的data中，并使用is_sale属性来区分普通商品和特卖商品。
Page({
data:{
goods_list:[],
scroll_height: 0
},
onLoad:function(options){
var that = this;
wx.request({
url: 'http://api.com/goods/list',
method: 'GET',
header: {
'content-type': 'application/json'
},
success: function(res){
var goods_list = res.data;
for(var i=0; i<goods_list.length; i++){
if(goods_list[i].is_sale){
goods_list[i].is_sale = 'sale';
}else{
goods_list[i].is_sale = '';
}
}
that.setData({
goods_list: goods_list
});
}
});
}
})
4. 总结
通过本文的介绍，我们了解了如何通过动态API实现特卖商品的流式布局。在开发中，我们需要熟悉wxss和wxml的基本语法，并掌握动态API的使用方法，才能更好地实现商城开发中的各种需求。