二、頁面

就像上面說的那樣，數(shù)據(jù)驅(qū)動頁面，讓我們看看頁面中的是什么樣子的吧

// 這里是 index.wxml// 這里有些陌生的標簽，不要緊，我只是引入了vant weapp而已,
// 你用任何你喜歡的html標簽都可以實現(xiàn)
<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()              // 創(chuàng)建一個database實例 
const todos = db.collection("todos")        // 取得數(shù)據(jù)庫中名為 "todos" 的集合

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

復制代碼 看到這里是不是有了疑問？

tasks是一個[ ] ，而它是空的，是如何變成下圖中的樣子？

skip 又是什么？

我們?nèi)〉玫膖odos，為什么還沒有出現(xiàn)？它本質(zhì)上它是一個對象 {} 只是這個花括號里有許多我們?nèi)M去的key 和 value

記住他們，我將接著和你解釋。

看 ！ 并沒有什么復雜的東西 只是通過 wx:for"{{tasks}}" 
循環(huán)遍歷tasks并渲染到<van-cell  title="{{item.title}}"/ >而已。
它一條一條的出現(xiàn)在視圖中了。
復制代碼

如果你對Vue或者小程序有一些了解，那么你將看得懂這段代碼在說一件什么事。

三、探究如何實現(xiàn)？

下拉刷新和觸底追加內(nèi)容

// 這里是index.js 
const db = wx.cloud.database()       // 創(chuàng)建一個database實例 
const todos = db.collection("todos") // 取得數(shù)據(jù)庫中名為 "todos" 的集合

Page({
    /*頁面的初始數(shù)據(jù)*/
  data: {                       // 一堆的代碼對于任何人來說都感到頭痛，所以跟著我注釋看吧~
    tasks: [],
    skip: 0
  },
  /****頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作****/
  onPullDownRefresh: function () {
    this.getData(res => {       // 這里只是調(diào)用了一個方法而已 接著注釋往下看它是什么
      wx.stopPullDownRefresh()
      //將skip和tasks重置到初始狀態(tài)。
      this.data.skip = 0
      this.data.tasks = []
    })
  },

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

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

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

總結一下

1. 就是通過skip()方法,跳過已加載過的數(shù)據(jù)，

2. 每次觸底都將已加載的數(shù)據(jù)和接下來要加載的數(shù)據(jù)進行拼接，并賦值給要渲染的data。

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