9.1.3 最新产品 界面开发 企业站uni-app实战【uni-app教程uniapp教程（黄菊华-跨平台开发系列教程）】

9.1.3 最新产品

最新产品区块效果如图9-4。

布局分析：最新产品区块的标题我们使用公司简介的代码，区块标题的样式是公用的；产品显示区块，我们这里做一个1行2列的流式布局，也就是我们每个产品的内容占据整个手机宽度的50%，那么1行就可以放2个产品了。
注意：我们每个产品的图片image中添加属性 mode=‘widthFix’ ，表示图片高度自动随图片高度自适应按比例变化。
布局代码如下：

<!--最新产品（1行2列流式布局） 开始-->
<view class='cp_zuixin'>

  <navigator url='' class='cp-xiangmu'>
    <image src='/static/tupian/cp01.jpg' class='cp_tupian' mode='widthFix'></image><!--产品图片-->
    <text class='cp-biaoti'>中年妈妈装冬装仿水貂绒外套40岁</text><!--产品标题-->
  </navigator>

  <navigator url='' class='cp-xiangmu'>
    <image src='/static/tupian/cp02.jpg' class='cp_tupian'  mode='widthFix'></image><!--产品图片-->
    <text class='cp-biaoti'>妈妈羽绒服真毛领白鹅绒上衣加厚</text><!--产品标题-->
  </navigator>

  <navigator url='' class='cp-xiangmu'>
    <image src='/static/tupian/cp03.jpg' class='cp_tupian' mode='widthFix'></image><!--产品图片-->
    <text class='cp-biaoti'>中年妈妈装冬装仿水貂绒外套40岁</text><!--产品标题-->
  </navigator>

  <navigator url='' class='cp-xiangmu'>
    <image src='/static/tupian/cp04.jpg' class='cp_tupian'  mode='widthFix'></image><!--产品图片-->
    <text class='cp-biaoti'>妈妈羽绒服真毛领白鹅绒上衣加厚</text><!--产品标题-->
  </navigator>  

</view><!--最新产品 结束-->

样式代码如下：

<style>
/*最新产品（1行2列流式布局）*/
.cp_zuixin {
  display: flex;   /*Flex布局*/
  flex-wrap: wrap; /*自动换行*/
}
.cp-xiangmu {
  width: 50%;    /*宽度*/
  display: flex; /*Flex布局*/
  padding: 3px;  /*内边距*/
  box-sizing: border-box; /*将padding包含到width*/
  flex-direction: column; /*改变Flex布局默认排列row为column*/
}
.cp_tupian {
  width: 100%; /*宽度*/
}
.cp-biaoti {
  font-size: 14px;  /*字体大小*/
  color: gray;      /*字体颜色*/
  overflow: hidden; /*字体超出部分隐藏*/
  white-space: nowrap;    /*文字不换行*/
  text-overflow: ellipsis;/*文字超出部分用省略号...显示*/
}
</style>

【uniapp参考资料】

（1）uni-app跨平台开发 入门到实战
https://ke.qq.com/course/package/26512

（2）uni-app 完整商城界面设计实战
https://ke.qq.com/course/2381059

（3）基于vue的uniapp商城完整项目源代码
https://ke.qq.com/course/3064977

（4）小白教程资料 http://www.2d5.net

（5）毕业设计网http://www.pc-365.net
（6）小程序编程网www.4317.org

（7）计算机编程网http://www.05423.com/