全棧工程師之路-中級篇之小程序開發-第三章第二節小程序下拉刷新，上拉加載

今天就直入主題吧！

調試技巧

這裏講一個調試的技巧，由於這個頁面是咱們點擊了首頁的更多才進入的，而且他須要攜帶參數。
因此咱們在左側工具裏面

注意點擊的是圖中紅色框框標記的位置，這是一個自定義按鈕。

寫上路勁和參數就能夠了，這樣每次啓動就是直接攜帶參數的進入這個頁面了。這樣也不用反覆去修改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_