微信小程序學習路線（2）：下單頁面的產品列表和留言本節
2022-10-16 08:00:51
歡樂點
下單頁面的產品列表和留言
本節主要講解下單頁面中的產品列表和留言界面如何實現。效果如圖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層：定義產品鏈接 ，無需樣式。
? 第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;}
小程序商城配備了、php、asp、net幾個版本的后臺、其他版本陸續制作中
【微信小程序參考資料】
（1）微信小程序學習路線
（2）Java微信小程序商城系統指導
（3）PHP微信小程序商城系統指導
（4）微信官方文檔
免責聲明：部分文章信息來源于網絡以及網友投稿，本站只負責對文章進行整理、排版、編輯，出于傳遞更多信息之目的，并不意味著贊同其觀點或證實其內容的真實性，如本站文章和轉稿涉及版權等問題，請作者在及時聯系本站，我們會盡快為您處理。
相關文章
