微信小程序（五）：上滑加载更多和下拉刷新的实现

最新推荐文章于 2024-07-31 17:44:02 发布

Skye Lin

最新推荐文章于 2024-07-31 17:44:02 发布

阅读量2.9k

点赞数 3

分类专栏：微信小程序文章标签：微信小程序下拉刷新上滑加载更多

本文链接：https://blog.csdn.net/skye_95/article/details/97011532

版权

微信小程序专栏收录该内容

8 篇文章 1 订阅

订阅专栏

1.准备工作

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

url:https://douban.uieee.com/v2/movie/coming_soon?start=0&count=3

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

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

movies.wxml

<import src="../movie-item/movie-item-template.wxml" />

<view class='container'>
  <block wx:for="{{moviesList}}" wx:for-item="item" wx:for-index="index">
    <view class='list' catchtap="onMovieTap" >
      <template is='movieTemplate' data="{{...item}}" />
    </view>
  </block>
</view>

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

<template name='movieTemplate'>
  <view class='list-item'>
      <view class='title'>
        <label class='username'>{{title}}</label>
      </view>
      <view class='info'>
          <label class='classes'>{{genres}}</label>
          <label class='Sno'>{{year}}年</label>
      </view>
  </view>
</template>

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:

<import src="../movie-item/movie-item-template.wxml" />

<view class='container'>
  <scroll-view class="movies-container" scroll-y="true" scroll-x="false" bindscrolltolower="onScrollLower">
    <block wx:for="{{moviesList}}" wx:for-item="item" wx:for-index="index">
      <view class='list' catchtap="onMovieTap" >
        <template is='movieTemplate' data="{{...item}}" />
      </view>
    </block>
  </scroll-view>
</view>

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 () {
    
  }
})