下单页面的产品列表和留言
本节主要讲解下单页面中的产品列表和留言界面如何实现。效果如图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）微信小程序学习路线 /
（2）Java微信小程序商城系统指导 /course/3066521
（3）PHP微信小程序商城系统指导 /course/3066518
（4）微信官方文档 https://developers./miniprogram/dev/framework/
20-微信小程序商城 下单页面的产品列表和留言（微信小程序商城开发 小程序毕业设计 小程序源代码）（黄菊华-微信小程序开发教程）
