因為要編寫一個新的頁面，是以第一件事情就是建立好目錄以及檔案：
我們需要實作兩個功能，一是點選電影資訊頁面上的 “更多” 時，跳轉到更多電影頁面中，二是跳轉時要擷取相應的電影類型。
編輯movie-list-template.wxml，修改内容如下：
在movie.js檔案中增加一個事件方法，内容如下：
最後是在more-movie.js中測試一下是否能成功擷取相應的電影類型：
分别點選不同的電影類型上的 “更多“ ，看看控制台的輸出是否對得上：
以上我們完成了電影類型的獲得，在這之後就需要動态的把獲得的資料設定為導航欄标題，這樣點選不同的電影類型時就能在更多電影頁面的導航欄上顯示不同的标題。
官方給出的設定導航欄文檔位址如下：
<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui.html#wxsettopbartextobject">https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui.html#wxsettopbartextobject</a>
編輯more-movie.js檔案内容如下：
以上新增的代碼就簡單的實作了動态設定導航欄标題。
這一步我們需要實作在更多電影頁面上，根據電影類型來向伺服器加載不同電影類型的資料，由于這個請求API資料的方法挺通用的，是以我把它放到了util.js下，到時候就可以全局調用了，提高代碼的複用性。
編輯util.js代碼如下：
編輯more-movie.js代碼如下：
以上我們已經完成了資料的處理，現在隻需要完成頁面代碼即可因為這個更多電影頁面的結構以及樣式都需要進行複用，是以我們還是使用template把這些代碼作為模闆代碼。
建立模闆檔案：
movie-grid-template.wxml檔案内容：
movie-grid-template.wxss檔案内容：
more-movie.wxml就隻需要引用模闆即可，代碼的可複用性越高，需要寫的代碼就越少：
more-movie.wxss也是隻需要引用模闆即可：
運作效果：
以上我們實作了更多電影頁面，但是每次隻能加載20條電影資料，我們希望能夠有一個上滑加載更多資料的功能，是以本節就是示範如何實作這樣一個功能。
實作這樣一個功能我們需要使用到scroll-view元件，該元件的官方說明文檔位址如下：
<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html">https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html</a>
編輯movie-grid-template.wxml檔案内容，将view換成scroll-view：
編輯movie-grid-template.wxss檔案内容，給grid-container設定一個固定的高度，因為需要有一個固定的高度才知道是否已經滾動到底部了：
最後是編輯more-movie.js檔案，這一步我們需要完成三件事情：
1.實作事件方法，當觸發bindscrolltolower時向API請求更多的資料
2.我們都知道第一次請求API時預設是請求0-19條資料，是以我們需要有一個變量充當計數器，讓這個變量的值在每一次請求成功後都進行累加，這樣才能讓start參數的值進行一個遞增，例如第一次是0-19，第二次就得是20-39，第三次就是40-59......以此類推
3.能夠實作不斷的往後加載資料之後，我們需要将這些資料都整合起來，不然的話資料會進行覆寫，那麼每一次加載都隻能顯示20條資料，這顯然不是我們想要的效果。我們想要的是資料進行疊加，第一次顯示20條資料，第二次顯示40條資料，第三次顯示60條資料......以此類推
理清思路後，編輯more-movie.js檔案内容如下：
以上我們完成了更多資料的加載，但是隻是這樣的話，體驗還不夠良好，我們需要在資料加載時提示使用者一個loading狀态，這樣體驗起來就沒那麼生硬。
有幾個API都可以實作這個loading的效果，我這裡使用的是wx.showNavigationBarLoading()，以下是關于互動回報API的官方文檔位址：
<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui.html#wxshownavigationbarloading">https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui.html#wxshownavigationbarloading</a>
編輯more-movie.js檔案中的onScrollLower以及processDoubanData方法，在方法代碼的末尾加上以下内容：
通過這兩個API就簡單的實作了資料加載時提示loading狀态。
幾乎所有的app裡都有下拉頁面重新重新整理資料的功能，是以我們也希望有一個這樣的功能。不過目前有一個小問題，我們是使用scroll-view元件來實作下滑加載更多資料的，但是130400版本更新後卻導緻下拉重新整理和scroll-view不能同時使用。
導緻onPullDownRefresh事件函數無法執行的原因是頁面裡包含一個scroll-view元件。而scroll-view元件和onPullDownRefresh在130400版本裡是沖突的。當我們在頁面裡滑動scroll-view時，隻是滑動這個元件，不再可以觸發onPullDownRefresh。當然，你還是可以在scroll-view區域外滑動頁面執行onPullDownRefresh。什麼意思呢？看下面的圖：
點選箭頭那塊兒的空白部分依然可以執行onPullDownRefresh，但除此之外任何位置都不可以執行重新整理事件。原因是因為，箭頭的空白部分不屬于scroll-view這個元件的區域，它是屬于page頁面的區域，page頁面依然可以執行onPullDownRefresh。但如果是在scroll-view元件内部去拉動頁面，則滑動的動作隻對scroll-view元件有效，不再對page頁面有效，自然就不會再觸發頁面的onPullDownRefresh。
解決方案如下（下拉重新整理和加載更多同時存在的方法）：
放棄使用scroll-view元件，改用view元件。那麼既然放棄了scroll-view元件，上滑加載更多就不能再使用scroll-view的bindscrolltolower="onScrollLower"事件。
那麼view元件如何監控上滑到底的事件？MINA在Page裡還提供了一個onReachBottom事件，使用這個事件來監聽頁面上滑到底。
具體改動：
more-movie.js檔案：
将原本的onScrollLower方法更名成onReachBottom，方法的内容無需任何改動。
movie-grid-template.wxml檔案：
完成以上的修改後，才能開始着手開始實作我們的下拉頁面重新重新整理資料的功能，首先我們需要編輯more-movie.json檔案，增加如下内容，以開啟下拉重新整理功能：
該配置語句的官網說明文檔位址：
<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html">https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html</a>
當下拉頁面下拉重新整理時會觸發onPullDownRefresh事件方法，是以最後就是編輯more-movie.js檔案，實作onPullDownRefresh方法，以及在processDoubanData方法裡需要添加一句代碼：
很多人以為 backgroundColor 設定的是頁面的背景顔色，而且官方文檔上寫的也不是很清楚，就寫了個 “視窗的背景色” 。經過試驗發現實際上 backgroundColor 設定的是我們下拉頁面時的那個背景顔色，我們可以做一個簡單的小實驗，在more-movie.json檔案中增加一行配置：
然後到more-movie頁面中，然後下拉頁面，可以看到背景顔色是我們設定的red紅色：
或許不能說是下拉頁面時的背景顔色，嚴格來說是Page頁面底層下的背景顔色，也就是脫離了Page頁面時裸露出來的頁面背景。
本文轉自 ZeroOne01 51CTO部落格，原文連結：http://blog.51cto.com/zero01/2067094，如需轉載請自行聯系原作者