下单页面的产品列表和留言

本节主要讲解下单页面中的产品列表和留言界面如何实现。效果如图14-9所示。


根据上面的布局分析，我们会产生基础的框架，代码示例如下：

<view><!—第1层-开始-->
   <image></image><!—第2层-->

   <view><!—第2层-->
      <view>珀莱雅水动力护肤品套装</view><!—第3层-->
      <view>月售：11 件 / 库存：121件</view><!—第3层-->
      <view class="price">￥：129.00</view><!—第3层-->
   </view>

   <view class="food-numb"><!—第2层-->
      <text>数量</text><!—第3层-->
   </view>
</view><!—第1层-结束-->

根据效果图分析出框架的层级后，在每个层级的view加上样式，编码实现即可。
 第1层：定义产品链接 navigator，无需样式。
 第2层：定义flex模式，默认从左到右排列。
 第3层：图片样式，多行文字的总体排列样式。

2.功能实现

.wxml文件代码示例如下：

<scroll-view class="foodList" scroll-y="true">

  <view class="food">
    <image class="img" src="/img/cp01.jpg"></image>
    <view class="food-info">
      <view class="name">珀莱雅水动力护肤品套装</view>
      <view class="sales">月售：11 件 / 库存：121件</view>
      <view class="price">￥：129.00</view>
    </view>
    <view class="food-numb">
      <text class="mytext" hidden=""> 2 件 </text>
    </view>
  </view>

  <view class="food">
    <image class="img" src="/img/cp02.jpg"></image>
    <view class="food-info">
      <view class="name">HFP秋冬季补水保湿亮肤套装</view>
      <view class="sales">月售：231 件 / 库存：11件</view>
      <view class="price">￥ 398.00</view>
    </view>
    <view class="food-numb">
      <text class="mytext" hidden=""> 1 件 </text>
     </view>
  </view>   

  <view class="food" style='height: 100rpx;'>
    留言：<input type='text' class='txt01'></input>
  </view>   

</scroll-view>

.wxss文件样式代码示例如下：

/*下单页面-产品列表和留言*/
.foodList{
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ECECEC;
}
.food{
  position: relative;
  display: flex;
  align-items: center;
  height: 170rpx;
  border-bottom: 1rpx solid #ECECEC; 
  background: white;
}
.food::before{
  content: "";
  width: 15rpx;
  height: 100%;
  left: -15rpx;
  top: 0;
  border: 1px solid white;
}
.food .img{
  width: 120rpx;
  height: 120rpx;
}
.food-info{
  padding-left: 15rpx;
  line-height: 40rpx;
  flex: 1;
}
.name{
  font-size: 30rpx;
}
.sales{
  font-size: 25rpx;
  color: #ACACAC;
}
.price{
  font-size: 30rpx;
  color: red;
}
.food-numb{
  height: 50rpx;
  display: flex;
  justify-content: flex-end;
  margin-top: 30rpx;
  margin-right: 30rpx;
  line-height: 50rpx;
  font-size: 40rpx; 
}
.mytext{width: 80rpx; height: 50rpx; text-align: center;}

小程序商城配备了javaweb、php、asp、net几个版本的后台、其他版本陆续制作中
【微信小程序参考资料】

（1）微信小程序学习路线 http://www.hzyaoyi.cn/

（2）Java微信小程序商城系统指导 https://ke.qq.com/course/3066521

（3）PHP微信小程序商城系统指导 https://ke.qq.com/course/3066518

（4）微信官方文档 https://developers.weixin.qq.com/miniprogram/dev/framework/