1.公共文件app文件可以放一些經常用到的方法 例如網絡請求和判斷網絡的封裝

在文件中如果想使用app.js中的方法直接var app = getApp() 直接就可以調用了

2.position相關的設置

想把文字放在圖片上邊 position: relative;

如果想把控件放在頁面的最下邊position:fixed;

3.實現漸變色

第一個是起點顏色，慢慢過渡到第二個顏色

從上到下的線性漸變：

background: linear-gradient(red, blue);

從左到右的線性漸變：

background: linear-gradient(to right, red , blue);

4.裁圓角

設置弧度 順序是 左上角 右上角 右下角 左下角 (順時針)

border-radius: 3px 0px 0px 3px;

5.使用rpx可以自適應 就不用考慮適配的問題了 建議使用iphone6測試 因為這個機型1px=2rpx;

6.下拉刷新和上拉加載

1)首先在要刷新類的.json文件里添加

{

"enablePullDownRefresh": true

}

2)然后在js里實現"onPullDownRefresh"和"onReachBottom"方法即可

下拉事件

onPullDownRefresh: function() {

console.log('刷新');

},

上拉事件

onReachBottom: function() {

console.log(' 下一頁');

},

注意：刷新可能會和scroll-view控件沖突

7.布局的一些屬性

display : flex; (display : flex 容器聲明)

flex-direction: (view中布局的方向)

row; (橫向布局 ，從左到右)

column; (垂直布局，布局從上往下)

row-reverse; (橫向布局 ，從右到左)

column-reverse;(垂直布局，布局從下到上)

flex-wrap: (當布局一行里面的數據無法全部顯示的時候，如何換行)

nowrap; (默認，不換行)

wrap; (換行，第一行在上面)

wrap-reverse; (換行，第一行在下面)

flex-flow: (是flex-direction和flex-wrap的簡寫，默認值是，row, nowrap)

例子：flex-flow:row||nowrap;

justify-content: (父布局對其中的子布局的對齊方式)

flex-start;(左對齊)

flex-end;(右對齊)

center;(居中)

space-between;( 兩端對齊，子控件之間的間隔等分)

space-around; (兩側，和子控件之間都有間隔，子控件的間隔是兩個間隔的兩倍)

align-items: (屬性在交叉軸上如何對齊)

flex-start;(交叉軸的起點對齊)

flex-end;(交叉軸的終點對齊)

center;(交叉軸的中點對齊)

baseline;(項目第一行文字的基線對齊)

stretch;(如果項目未設置高度或是設置為auto，將占滿整個容器的高度)

align-content:(子類里面有多行布局時的對齊方式，只有一個布局時，該屬性不起作用)

flex-start;(交叉軸的起點對齊)

flex-end;(交叉軸的終點對齊)

center;(交叉軸的中點對齊)

space-between;( 兩端對齊，子控件之間的間隔等分)

space-around; (兩側，和子控件之間都有間隔，子控件的間隔是兩個間隔的兩倍

stretch;(如果項目未設置高度或是設置為auto，將占滿整個容器的高度)

8.margin的使用

margin屬性應用于元素外面的空間，或者是位于元素和瀏覽器窗口之間的區域，或者元素和元素直接的區域。

margin屬性分為：margin-top、margin-right、margin-bottom、margin-left 分別對應上右下左的內邊距距離，可取值：auto/數值/百分比。

margin: 10rpx 10rpx 10rpx 10rpx; (如果提供了四個參數，將用在上，右，下，左的順序上)

margin: 10rpx; (如果是一個參數，就是作用在四個方向上)

margin: 10rpx 10rpx; (如果是兩個參數，第一個參數用于上下，第二個參數用于左右)

margin: 10rpx 10rpx 10rpx; (如果是三個參數，第一個參數用于上，第二個參數用于左右，第三個參數用于下)

9.template模板的使用

name是設置模板的名字