今天就直入主題吧！
調試技巧
這裏講一個調試的技巧，因爲這個頁面是我們點擊了首頁的更多才進入的，並且他需要攜帶參數。
所以我們在左側工具裏面
注意點擊的是圖中紅色框框標記的位置，這是一個自定義按鈕。
寫上路勁和參數就可以了，這樣每次啓動就是直接攜帶參數的進入這個頁面了。這樣也不用反覆去修改json文件。
上拉加載
首先我們先編寫一下moviemore的頁面。
在頭部引入搜索按鈕，記得在wxss中也要引入搜索按鈕的樣式。
然後編寫一個view，樣式屬性設置display: flex;flex-direction: row;flex-wrap:wrap;按行排列，超出換行。
moviemore.wxml如下：
<!--pages/moviemore/moviemore.wxml-->
<import src="../public/tpl/moviecard.wxml" />
<import src="../public/tpl/searchBtn.wxml" />
<view class="container">
<template is="searchBtnTpl"></template>
<view class="movielist">
<block wx:for="{{movieList.subjects}}" wx:key="item">
<template is="moviecardTpl" data="{{...item}}"></template>
</block>
</view>
</view>
以上內容都是我們之前講解過得，你都可以從其他文件中拷貝過來，一部分來自index一部分來自movielist。
我們上一節課已經在moviemore.js中取到了請求的url。
所以我們還是在onload函數中，發起頁面初始數據的請求。
這裏我們查看豆瓣API，可以得知他們是使用start和count來實現分頁數據的。
一般比較常用的接口是page和rows管理頁碼和每頁條數。
因爲我們還要上拉加載更多數據，所以，請求的url和請求的參量應該是一個共有變量。
所以我們在page的data裏面也設置了url、count和start。
/**
* 頁面的初始數據
*/
data: {
movieList:[],
count:12,
start:0,
url:''
},
moviemore.js中的onload函數
/**
* 生命週期函數--監聽頁面加載
*/
onLoad: function (options) {
console.log(options)
var that = this;
util.getMovieList(options.url, "查看更多", { start: that.data.start,count: that.data.count }).then((movieList) => {
that.setData({
movieList: util.movieDataFactory(movieList),
url:options.url,
start: that.data.start + that.data.count
});
})
},
這裏第一次用到的count是初始的數據12，start是初始數據0。然後發起之後重設了start值。
保存刷新
我們看到了界面是我們想要的效果了，但是注意看標題並不是我們想要的。
我們之前講過了設置標題是在json文件的windows屬性裏面的。
我們的子頁面也有一個自己的json，用於設置只用於當前頁面的一些配置項。
但是我們這個查看更多頁面，應該要根據不同的請求接口顯示，不同的標題，這個標題參數一般是從服務端獲取的。
根據我們的需求，這個標題只需要設置一次，所以我們在onload函數，請求的回調中，加入
wx.setNavigationBarTitle({
title: "查看更多"
})
接着我們來編寫加載更多數據的邏輯。
我們先在頁面上拉觸底事件的處理函數中加入打印，如果你沒有這個函數，自己加上去就好了，注意這個函數和onload函數是同級的屬性。
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
console.log("到達底部咯");
},
保存，滾動頁面，右側滑塊到底的時候會觸發上面的函數，可以在控制檯中查看打印。
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
console.log("到達底部咯")
if(this.data.url === ''){
return ;
}
var that = this;
util.getMovieList(this.data.url, "查看更多", { start: that.data.start,count: this.data.count }).then((movieList) => {
// 注意這裏我們的數據結構是這樣子的
// var data = {
// url:'',
// title:'',
// subjects:[]
// }
// 所以我們要增加的是subjects數組，使用concat函數
var newdata = util.movieDataFactory(movieList);
var olddata = that.data.movieList;
olddata.subjects = olddata.subjects.concat(newdata.subjects)
that.setData({
movieList: olddata ,
start: that.data.start + that.data.count
});
})
},
這裏要根據不同的接口文檔設計的數據結構，重寫這個邏輯。
如果你發現一直不對，那就一步一步的斷點查看數據。
建議是一步一步的打印數據，這樣在控制檯，可以展開查看每個數據項，
可以比對一下數據，比目測的要好一點，還不費腦子。
保存。我們的上拉加載功能就實現了。
下拉刷新
下拉刷新其實比加載要容易，只要把數據都設置成初始數據，再發起一次請求就可以了。
但是下拉刷新要在界面中開啓功能纔會有效。
步驟1：在json文件中設置
{
"enablePullDownRefresh":true
}
步驟2：在onPullDownRefresh函數中，編寫用戶下拉動作邏輯
步驟3：在數據刷新完畢之後要手動調用wx.stopPullDownRefresh();停止當前的頁面刷新動作。
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
console.log("用戶下拉動作")
if (this.data.url === '') {
return;
}
var that = this;
util.getMovieList(this.data.url, "查看更多", { start: 0, count: that.data.count }).then((movieList) => {
that.setData({
movieList: util.movieDataFactory(movieList),
start: that.data.count
});
wx.stopPullDownRefresh();
})
},
保存。
源代碼：百度雲 鏈接：http://pan.baidu.com/s/1jH8YDme 密碼：6p28
這節課的內容就到這裏結束了。
感謝您的閱讀。
我是莽夫，希望你開心。
如果你覺得本文對你有幫助，請掃描文末二維碼，支持博主原創。
希望大家關注我的個人公衆號ionic_
