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

9.2.3 右侧产品

我们本小节来填充（虚线框起来部分）右侧产品列表，如图9-10。

布局分析：1列2列的流式布局。

布局代码如下：

<!--右侧产品（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/