小程序頁面怎樣寫

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();

}

 

})