本文共 9343 字，大约阅读时间需要 31 分钟。

1.准备工作

由于要演示上滑加载更多，所以此处换用豆瓣的API。在微信公众平台-》开发-》服务器域名进行配置。本来是要配置的，但是控制台报错403，查阅资料修改为。并在微信开发者工具-》详情中进行设置，便可成功请求数据。

 url:/v2/movie/coming_soon?start=0&count=3

 2.创建项目，获取数据，渲染页面

template模板借用了微信小程序（四）中的样式，详情可查看之前的，本篇的主要目的是实现上滑加载更多和下拉刷新。

movies.wxml

movies.wxss

@import "../movie-item/movie-item-template.wxss";page{  background-color: #f0f0f0;}.container{  margin: 20rpx;}

movies.js:用request请求代替的之前的本地静态数据库返回数据

Page({  /**   * 页面的初始数据   */  data: {      },  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {    this.getMoviesData();  },  getMoviesData:function(){    var that = this;    wx.request({      url: "https://douban.uieee.com/v2/movie/coming_soon?start=0&count=3",      method: 'GET',       header: {        "Content-Type": "json"      },      success: function (res) {        console.log(res.data)        that.setData({          moviesList: res.data.subjects        })      },      fail: function (error) {        // fail        console.log(error)      }    })  },  /**   * 生命周期函数--监听页面初次渲染完成   */  onReady: function () {      },  /**   * 生命周期函数--监听页面显示   */  onShow: function () {      },  /**   * 生命周期函数--监听页面隐藏   */  onHide: function () {      },  /**   * 生命周期函数--监听页面卸载   */  onUnload: function () {      },  /**   * 页面相关事件处理函数--监听用户下拉动作   */  onPullDownRefresh: function () {      },  /**   * 页面上拉触底事件的处理函数   */  onReachBottom: function () {      },  /**   * 用户点击右上角分享   */  onShareAppMessage: function () {      }})

movie-item-template.wxml

movie-item-template.wxss

.list-item{  background-color: white;  border-radius: 10rpx;}.title{  margin: 20rpx;  line-height: 80rpx;  flex-direction: row;  display: flex;  border-bottom: 1rpx solid #f0f0f0;}.num{  position: absolute;  right: 50rpx;}.info{  margin: 20rpx;  flex-direction: row;  display: flex;  line-height: 60rpx;  font-size: 34rpx;}.Sno{  position: absolute;  right: 50rpx;}

运行结果：

3.实现下拉刷新

（1）在小程序里，用户顶部下拉是默认禁止的，我们需要把他设置为启用，在app.json中的设置对所有页面有效，在单独页面设置则对当前页面有效。这里我在app.json中设置

（2）在需要实现下拉刷新的js文件中找到监听用户下拉的函数onPullDownRefresh，在其中添加刷新的请求函数。

（3）运行结果。默认请求为3条，设置刷新后请求为5条。

4.实现上滑加载更多，设置每次请求10条

方法一：onPullDownRefresh和onReachBottom实现

 在上拉触底函数中添加请求函数，重点是如果moviesList有数据，就要把上滑加载得到的数据和原有的数据合到一起再赋值给moviesList，如果没有，就把上滑加载得到的数据直接赋值给上滑加载得到的数据。

/**   * 页面上拉触底事件的处理函数   */  onReachBottom: function () {    var that = this;    // 显示加载图标    wx.showLoading({      title: '玩命加载中',    })        wx.request({      url: 'https://douban.uieee.com/v2/movie/coming_soon?start=' + that.data.totalCount +'&count=10',      method: "GET",      // 请求头部      header: {        'content-type': 'json'      },      success: function (res) {        console.log(res.data.subjects);        if (res.data.subjects.length==0){          wx.showToast({            title: '没有更多了',            icon: 'none',            duration: 2000          });          return;        }        var movies = res.data.subjects;        // 回调函数        var totalMovies = {};        //如果要绑定新加载的数据，那么需要同旧有的数据合并在一起        if (!that.data.isEmpty) {          totalMovies = that.data.moviesList.concat(movies);        }        else {          totalMovies = movies;          that.data.isEmpty = false;        }        that.setData({          moviesList: totalMovies        })        that.data.totalCount += 10;        // 隐藏加载框        wx.hideLoading();      }    })  },

 运行结果：

每次触底就会请求10条数据： 

 还可以把request请求单独拧出来写成一个函数进行复用：

getMoviesData:function(){    var that = this;    // 显示顶部刷新图标    wx.showNavigationBarLoading();    // 显示加载图标    wx.showLoading({      title: '玩命加载中',    })    wx.request({      url: 'https://douban.uieee.com/v2/movie/coming_soon?start=' + that.data.totalCount + '&count=10',      method: 'GET',       header: {        "Content-Type": "json"      },      success: function (res) {        console.log(res.data.subjects);        if (res.data.subjects.length == 0) {          wx.showToast({            title: '没有更多了',            icon: 'none',            duration: 2000          });          return;        }        var movies = res.data.subjects;        // 回调函数        var totalMovies = {};        //如果要绑定新加载的数据，那么需要同旧有的数据合并在一起        if (!that.data.isEmpty) {          totalMovies = that.data.moviesList.concat(movies);        }        else {          totalMovies = movies;          that.data.isEmpty = false;        }        that.setData({          moviesList: totalMovies        })        that.data.totalCount += 10;        // 隐藏加载框        wx.hideLoading();        // 隐藏导航栏加载框        wx.hideNavigationBarLoading();        // 停止下拉动作        wx.stopPullDownRefresh();      },      fail: function (error) {        // fail        console.log(error)      }    })  },

movies.js详细代码：

Page({  /**   * 页面的初始数据   */  data: {    moviesList:{},    totalCount: 0,    isEmpty: true,  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {    this.getMoviesData();  },  getMoviesData:function(){    var that = this;    // 显示顶部刷新图标    wx.showNavigationBarLoading();    // 显示加载图标    wx.showLoading({      title: '玩命加载中',    })    wx.request({      url: 'https://douban.uieee.com/v2/movie/coming_soon?start=' + that.data.totalCount + '&count=10',      method: 'GET',       header: {        "Content-Type": "json"      },      success: function (res) {        console.log(res.data.subjects);        if (res.data.subjects.length == 0) {          wx.showToast({            title: '没有更多了',            icon: 'none',            duration: 2000          });          return;        }        var movies = res.data.subjects;        // 回调函数        var totalMovies = {};        //如果要绑定新加载的数据，那么需要同旧有的数据合并在一起        if (!that.data.isEmpty) {          totalMovies = that.data.moviesList.concat(movies);        }        else {          totalMovies = movies;          that.data.isEmpty = false;        }        that.setData({          moviesList: totalMovies        })        that.data.totalCount += 10;        // 隐藏加载框        wx.hideLoading();        // 隐藏导航栏加载框        wx.hideNavigationBarLoading();        // 停止下拉动作        wx.stopPullDownRefresh();      },      fail: function (error) {        // fail        console.log(error)      }    })  },  /**   * 生命周期函数--监听页面初次渲染完成   */  onReady: function () {      },  /**   * 生命周期函数--监听页面显示   */  onShow: function () {      },  /**   * 生命周期函数--监听页面隐藏   */  onHide: function () {      },  /**   * 生命周期函数--监听页面卸载   */  onUnload: function () {      },  /**   * 页面相关事件处理函数--监听用户下拉动作   */  onPullDownRefresh: function () {    this.data.moviesList = {};    this.data.isEmpty = true;    this.data.totalCount = 0;      this.getMoviesData();  },  /**   * 页面上拉触底事件的处理函数   */  onReachBottom: function () {    this.getMoviesData();  },  /**   * 用户点击右上角分享   */  onShareAppMessage: function () {      }})

方法二：scroll-view实现

我在使用scroll-view实现上滑加载更多的时候，发现上滑触发不了函数，scroll-view设置了高度为100%，也触发不了，后来发现是因为父辈元素（包括page)没有设置高度，将父辈元素的高度也设置为100%，就可以触发了。

movies.wxml:

movies.wxss:

@import "../movie-item/movie-item-template.wxss";page{  height: 100%;  background-color: #f0f0f0;}.container{  height: 100%;  margin: 20rpx;}.movies-container{  height: 100%}

movies.js:

Page({  /**   * 页面的初始数据   */  data: {    moviesList:{},    totalCount: 0,    isEmpty: true,  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {    this.getMoviesData();  },  getMoviesData:function(){    var that = this;    // 显示顶部刷新图标    wx.showNavigationBarLoading();    // 显示加载图标    wx.showLoading({      title: '玩命加载中',    })    wx.request({      url: 'https://douban.uieee.com/v2/movie/coming_soon?start=' + that.data.totalCount + '&count=10',      method: 'GET',       header: {        "Content-Type": "json"      },      success: function (res) {        console.log(res.data.subjects);        if (res.data.subjects.length == 0) {          wx.showToast({            title: '没有更多了',            icon: 'none',            duration: 2000          });          return;        }        var movies = res.data.subjects;        // 回调函数        var totalMovies = {};        //如果要绑定新加载的数据，那么需要同旧有的数据合并在一起        if (!that.data.isEmpty) {          totalMovies = that.data.moviesList.concat(movies);        }        else {          totalMovies = movies;          that.data.isEmpty = false;        }        that.setData({          moviesList: totalMovies        })        that.data.totalCount += 10;        // 隐藏加载框        wx.hideLoading();        // 隐藏导航栏加载框        wx.hideNavigationBarLoading();        // 停止下拉动作        wx.stopPullDownRefresh();      },      fail: function (error) {        // fail        console.log(error)      }    })  },  onScrollLower:function(event){    this.getMoviesData();  },  /**   * 生命周期函数--监听页面初次渲染完成   */  onReady: function () {      },  /**   * 生命周期函数--监听页面显示   */  onShow: function () {      },  /**   * 生命周期函数--监听页面隐藏   */  onHide: function () {      },  /**   * 生命周期函数--监听页面卸载   */  onUnload: function () {      },  /**   * 页面相关事件处理函数--监听用户下拉动作   */  onPullDownRefresh: function () {    this.data.moviesList = {};    this.data.isEmpty = true;    this.data.totalCount = 0;      this.getMoviesData();  },  /**   * 页面上拉触底事件的处理函数   */  onReachBottom: function () {    // this.getMoviesData();  },  /**   * 用户点击右上角分享   */  onShareAppMessage: function () {      }})

转载地址：http://elssi.baihongyu.com/