1.在上一篇我們説到我們在寫小程序要運用的知識是c3,h5,js，小程序的基本結構瞭解了，接下來我們來了解頁面佈局，
2.其實小程序的佈局和我們在編寫網頁的佈局是差不多的，就是我們要注意幾點，就是我們在傳統的佈局當中都是用div佈局的，再就是c3當中那些語義化標籤就行佈局，而我們的小程序中就不是用div了，他用的是view這個標籤，他的效果和div一樣，都是塊級元素還有一個使我們要注意的就是文本標籤<text>；簡單的理解這兩個標籤就是替換了常規的HTML當中的塊級元素和行內元素；
3. 首先我們在寫頁面時我們要先看結構，在怎麼佈局，其實我在寫些小程序的時候用彈性佈局
我們舉例子來看：
我們就拿網易雲這個來説，他的第一頁差不多就是這樣一個結構，在這個頁面的難點就在於這個輪播圖，和下邊的導航欄，其實中間的都還好，就是用<view>這個標籤來進行佈局，然後用c3當中的彈性盒子來寫，然後加點樣式就可以了，在這我就不講了；
我們在編寫頁面是有個小技巧：就是把你編寫的頁面放到第一個，這樣你刷新頁面就不會這樣麻煩，如圖：（這裏我們要注意，每個頁面必須要用逗號分割，最後一個頁面不寫逗號）
這裏來講下輪播圖：
第一種：
<swiper>標籤其實是一個組件，他是內容滑塊區域，其中只可放置swiper-item組件,否者就會報錯
就這樣理解，就是父元素裏面套幾個子元素
它這裏面還有很多屬性：
autoplay 他的值true/false 是否自動切換
indicator-dots 他的值true/false 輪播圖上的小圓點
indicator-color rgba 指示點的顏色
indicator-active-color 選中當前指示點的顏色
circular 他的值true/false 是否讓圖片銜接
duration 滑動時長（默認500）
interval 自動切換時間間隔（默認5000）
vertical 他的值true/false 滑動方向是否為縱向
previous-margin “多少px” 前邊距，可用於露出前一項的一小部分，接受 px 和 rpx 值
next-margin “多少px” 後邊距，可用於露出後一項的一小部分，接受 px 和 rpx 值
display-multiple-items 值為1 同時顯示的滑塊數量
這樣寫後期不好維護；就跟我們HTML一樣是寫死在上面的
第二種：就是用js來寫，動態的添加圖片
其實就是把我們所要的值放在js中來寫，就方便我們的後期維護
這是在一個叫MVVM模式寫開發的 ，在這裏就比我們在JS當中寫for循環簡單了，就是把js當中的，自己定義的屬性名放到這個中括號當中，然後再把路徑也寫進去，如果自定義路徑的就把自己定義的名字寫入到中括號中，否者就寫默認的item，基本上就可以了。
4.tabBar：下邊導航欄
這裏面是以數組的方式進行存儲的，所以這個list裏面最少要寫兩個對象，不然就沒有是麼意義了，裏面存幾個對象，都會平分下邊的距離；
這裏面有幾個屬性：
selectedColor：被選中後的字體顏色；
pagePath：和你對應的頁面
text：下面的文字
iconPath：初始圖片
selectedIconPath：被選中的圖片
5.來個例子看下：（模仿購物車）
這是js部分：
Page({
data: {
carts:[
{id:1,title:"水果", num:0,price:39,selected:true},
{ id: 2,title:"飲品",num:0, price:34, selected:true },
{ id: 3, title: "水果", num: 0, price: 39, selected: true },
{ id: 4, title: "飲品", num: 0, price: 34, selected: true },
{ id:5, title: "水果", num: 0, price: 39, selected: true },
{ id: 6, title: "飲品", num: 0, price: 34, selected: true },
],
number:0,
money:0
},
getnumber(){//總份數
let carts=this.data.carts;
console.log(this);
let total=0;
for (let i = 0; i < carts.length;i++){
total+= carts[i].num;
}
this.setData({
number:total
})
},
getmoney() {
let carts = this.data.carts;
let total = 0;
for (let i = 0; i < carts.length; i++) {
total += carts[i].num * carts[i].price
}
this.setData({//賦值
money:total
})
},
addCount(e){
var index = e.currentTarget.dataset.index;//獲取當前的索引
let carts = this.data.carts;
let num = carts[index].num;
num=num+1;
console.log(num);
carts[index].num = num;
console.log(carts[index].num);
this.setData({
carts:carts
})
this.getnumber();
this.getmoney();
},
minCount(e) {
var index = e.currentTarget.dataset.index;
let carts = this.data.carts;
let num = carts[index].num;
num = num - 1;
carts[index].num = num;
this.setData({
carts: carts
})
this.getnumber();
this.getmoney();
}
})
