二、頁面

就像上面說的那樣，數據驅動(dòng)頁面，讓我們看看頁面中(zhōng)的是什麼樣子(zǐ)的吧

// 這裡是 index.wxml// 這裡有些陌生的标簽，不要緊，我隻是引入了vant weapp而已,
// 你(nǐ)用任何你(nǐ)喜歡的html标簽都可(kě)以實現
<van-cell-group>
  <block wx:for="{{tasks}}" wx:key="index">
    <navigator url="../todoInfo/todoInfo?id={{item._id}}">      
      <van-cell title="{{item.title}}" />    
    </navigator>  
  </block>
</van-cell-group>
複制代碼

// 這裡是 index.js

const db = wx.cloud.database()              // 創建一個(gè)database實例 
const todos = db.collection("todos")        // 取得數據庫中(zhōng)名為 "todos" 的集合

Page({  
  /*頁面的初始數據*/  
  data: {    
    tasks: [],    
    skip: 0  
  },
})
複制代碼

複制代碼 看到這裡是不是有了疑問(wèn)？

tasks是一個(gè)[ ] ，而它是空的，是如(rú)何變成下(xià)圖中(zhōng)的樣子(zǐ)？

skip 又是什麼？

我們取得的todos，為什麼還沒有出現？它本質上它是一個(gè)對象 {} 隻是這個(gè)花(huā)括号裡有許多我們塞進去的key 和(hé) value

記住他們，我将接着和(hé)你(nǐ)解釋。

看 ！ 并沒有什麼複雜的東西 隻是通(tōng)過 wx:for"{{tasks}}" 
循環遍曆tasks并渲染到<van-cell  title="{{item.title}}"/ >而已。
它一條一條的出現在視圖中(zhōng)了。
複制代碼

如(rú)果你(nǐ)對Vue或者小程序有一些了解，那麼你(nǐ)将看得懂這段代碼在說一件什麼事。

三、探究如(rú)何實現？

下(xià)拉刷新和(hé)觸底追加内容

// 這裡是index.js 
const db = wx.cloud.database()       // 創建一個(gè)database實例 
const todos = db.collection("todos") // 取得數據庫中(zhōng)名為 "todos" 的集合

Page({
    /*頁面的初始數據*/
  data: {                       // 一堆的代碼對于任何人來說都感到頭痛，所以跟着我注釋看吧~
    tasks: [],
    skip: 0
  },
  /****頁面相關(guān)事件處理函數--監聽用戶下(xià)拉動(dòng)作****/
  onPullDownRefresh: function () {
    this.getData(res => {       // 這裡隻是調用了一個(gè)方法而已 接着注釋往下(xià)看它是什麼
      wx.stopPullDownRefresh()
      //将skip和(hé)tasks重置到初始狀态。
      this.data.skip = 0
      this.data.tasks = []
    })
  },

  /****頁面上拉觸底事件的處理函數****/
  onReachBottom: function () {  // 這裡隻是調用了一個(gè)方法而已 接着注釋往下(xià)看它是什麼
    // 顯示加載圖标
    console.log("到底了")
    this.getData(res => {})
  },
  
  /***********************getData是我自定義的函數***********************/
  getData: function (callback) {
    if (!callback) {
      callback = res => {}
    }
    wx.showLoading({
      title: '正在努力加載···',
    })
    
  // 這裡以下(xià)才是重要的部分// 注意todos我們之前已經得到它了
  
  // 下(xià)面這串代碼告訴我們，取得todos中(zhōng)的數據，每次它都會跳過this.data.skip條，每次都将數據通(tōng)過
  setData()，把tasks的值修改為 oldData和(hé)res.data拼接後的值。成功後将this.data.skip+20。
  // 随後你(nǐ)再看上面的代碼 他們都是在觸發條件的時候執行了getData而已，再順帶附加了進行了一
  些其他的操作

    todos.skip(this.data.skip).get().then(res => {
      // 用skip方法跳過已加載的部分 第一次跳過 0 條
      let oldData = http://www.wxapp-union.com/this.data.tasks
      this.setData({
        // 将跳過的數據 和(hé) 新加載 的拼接成新數據并渲染頁面 
        tasks: oldData.concat(res.data)
      }, res => {
        // 每次加20 則上面的skip每次就跳過 前20條
        this.data.skip += 20
        wx.hideLoading({
          success: (res) => {},
        })
        callback()
      })
    })
  },
複制代碼

起始渲染20條，是小程序約定的公共值

總結一下(xià)

1. 就是通(tōng)過skip()方法,跳過已加載過的數據，

2. 每次觸底都将已加載的數據和(hé)接下(xià)來要加載的數據進行拼接，并賦值給要渲染的data。

3. 每次刷新再重置data并重新加載頁面。