微信小程序触底自动加载数据列表和手动加载数据列表（云数据库版）

一、触底自动加载数据

1.js文件中顶部添加以下代码

const db = wx.cloud.database()
const data = db.collection('数据库中要引入的集合名')
var row = 5 //每次从数据库中加载的条数
var pages = 0 //当前页面

2.在onLoad函数中添加数据库查询命令

onLoad: function (options) {
    news.limit(row).get({ 
      success: res =>{
        that.setData({
          dataList: res.data
        })
      }
    })
},

3.触底自动加载设置

  /**
   * 页面上拉触底事件的处理函数
   */
onReachBottom: function () { 
    //翻下一页
    pages++
    //获取当前页面的新闻记录
    data.skip(row * pages).limit(row).get({ //skip(row * pages)：查询结果跳过row * pages条记录
      success: res =>{
        //获取原有的新闻记录
        let old_data = this.data.dataList
        // 获取新页面的新闻记录
        let new_data = res.data
        //更新首页新闻列表
        this.setData({
          dataList: old_data.concat(new_data) //concat()用于连接字段或字符
        })

      }
},

二、手动刷新数据

1.制作页面刷新按钮

//xx.wxml文件
<image slot="left" src="../../../images/shuaxin.png" class="refresh" animation="{{animation}}" bindtap="refresh"></image>

2.刷新按钮的动画和页面中信息的加载

//xx.js文件
var _animation; // 动画实体
var _animationIndex = 0; //动画执行次数index（当前执行了多少次）
var _animationIntervalId = -1; // 动画定时任务id，通过setInterval来达到无限旋转，记录id,用于结束定时任务
const _ANIMATION_TIME = 300; //动画播放一次的时长ms
Page({

  /**
   * 页面的初始数据
   */
  data: {
    page: 0,
    pageCount: 6,
    haveMoreData: true,
    loadMore: false,
    loading: false,
    refresh: false,
}

/**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    _animationIndex = 0;
    _animationIntervalId = -1;
    this.data.animation = '';

    _animation = wx.createAnimation({
      duration: _ANIMATION_TIME,
      timingFunction: 'linear',
      delay: 0,
      transformOrigin: '50% 50% 0'
    })

    this.refresh()
  },

 /**
   * 实现image旋转动画，每次旋转120*n度
   */
  rotateAni: function (n) {
    _animation.rotate(120 * (n)).step()
    this.setData({
      animation: _animation.export()
    })
  },
  /**
   * 开始旋转
   */
  startAnimationInterval: function () {
    var that = this;
    that.rotateAni(++_animationIndex); //进行一次旋转
    _animationIntervalId = setInterval(function () {
      that.rotateAni(++_animationIndex);
    }, _ANIMATION_TIME); //每间隔 _ANIMATION_TIME进行一次旋转
  },
  /**
   * 停止旋转
   */
  stopAnimationInterval: function () {
    if (_animationIntervalId > 0) {
      clearInterval(_animationIntervalId);
      _animationIntervalId = 0;
    }
  },

/**
   * 自定义函数--点击刷新按钮
   */
  refresh() {
    if (this.data.loading) {
      return
    }
    this.setData({
      refresh: true,
    })
    this.startAnimationInterval();
    this.getList();


  },
/**
   * 自定义函数--获取数据库数据
   */
  getList() {
    if (this.data.loading) {
      return
    } else {
      this.setData({
        loading: true
      })
    }
    var currentPage = this.data.page;
    // 如果是刷新，要设置请求的页码为0
    if (this.data.refresh) {
      currentPage = 0;
    }
    db.collection('data')
      .orderBy('_openid', 'desc') // 降序排列
      .skip(currentPage * this.data.pageCount)
      .limit(this.data.pageCount)
      .get()
      .then(res => {
        console.log("getList:", res)
        if (this.data.refresh) {
          this.setData({
            list: []
          })
        }
        if (res.data.length > 0) {
          for (var i = 0; i < res.data.length; i++) {
            res.data[i].createTime = this.js_date_time(res.data[i].createTime);
            this.data.list.push(res.data[i])
          }
          this.setData({
            list: this.data.list
          })
          this.setData({
            refresh: false,
            loading: false,
            page: currentPage + 1
          })

          if (res.data.length == this.data.pageCount) {
            this.setData({
              haveMoreData: true
            })
          } else {
            this.setData({
              haveMoreData: false
            })
          }
        }
        this.stopAnimationInterval();


      })
      .catch(error => {
        console.log("getList error:", error)
        this.stopAnimationInterval();
        this.setData({
          refresh: false,
          loading: false
        })
      })

  },

/**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if (this.data.loading) {
      return
    } else {
      this.setData({
        loadMore: true
      })

      setTimeout(() => {
        this.getList();
      }, 3000);
    }
    
  },