1.下拉刷新事件

如果頁面需要下拉刷新功能，則在頁面對應(yīng)的json配置文件中，將enablePullDownRefresh配置設(shè)置為true，如下

{"usingComponents": {},"enablePullDownRefresh": true
}

2.上拉觸底事件

在很多時候，我們在瀏覽一些購物網(wǎng)站的時候，往上拉的時候都是動態(tài)加載新的數(shù)據(jù)信息，這個時候就需要用到頁面的上拉觸底事件，來進行新數(shù)據(jù)的獲取和加載，我們在對應(yīng)的頁面下的js文件中onReachBottom()事件進行監(jiān)聽處理，就可以對上拉觸底就行功能編寫：

例如我們在一個界面上獲取隨機顏色加載的案例，

a.我們在data中定義一個colorList來獲取隨機顏色集合

  data: {colorList:[]     },

b.通過wx:request來調(diào)用接口獲取隨機顏色數(shù)據(jù)，并且在頁面的onLoad事件中調(diào)用，目的是為了一進來頁面就進行接口的調(diào)用

getColors(){wx.request({url: 'https://applet-base-api-t.itheima.net/api/color',method:"GET",success:({data:res}) => {console.log(res)this.setData({colorList:[...this.data.colorList,...res.data]})}})},/*** 生命周期函數(shù)--監(jiān)聽頁面加載*/onLoad(options) {this.getColors()},

c.在頁面中通過wx:for的方法動態(tài)顯示顏色塊

<view wx:for="{{colorList}}" wx:key="index" class="num-item" style="background-color: rgba({{item}});">
{{item}}
</view>

d.在onReachBottom()方法中同樣調(diào)用getColors方法來實現(xiàn)每次上拉到底的時候獲取新的數(shù)據(jù)進行拼接顯示

 /*** 頁面上拉觸底事件的處理函數(shù)*/onReachBottom() {this.getColors()},

e.添加loading提示效果，

通過wx:showLoading(Object object)方法，注意，需要主動調(diào)用wx:hideLoading才能關(guān)閉提示，

f.最終我們可以看到上拉的效果如下：

---

3.自定義組件Component

自定義組件指的是自己定義的可以被其他頁面引用的component組件，它與頁面不同，類似于winform中Form窗口和userControl用戶空間的區(qū)別。一個用戶空間可以被多個窗口使用，同樣的一個用戶組件Component可以被多個Page引用，自定義組件包括局部組件和全局組件：

3.1局部組件：

定義在單獨頁面中的組件，在某一個頁面中的.json文件中的usingComponent節(jié)點中來定義，如下：

 "usingComponents": {"my-test1":"/component/test/test"},

然后在對應(yīng)的頁面中直接引用即可：

<my-test1></my-test1>

3.2全局組件

全局組件是定義中小程序外部的app.json中的，同樣在app.json文件中增加usingComponents節(jié)點進行配置：如下：

{"usingComponents": {"global-test":"/component/test/test"},"style": "v2","componentFramework": "glass-easel","sitemapLocation": "sitemap.json","lazyCodeLoading": "requiredComponents"
}

在app.json文件定義之后，便可以在該小程序的任何頁面中進行引用。