云开发 CloudBase 步骤5：我的纸条页面逻辑处理-示例教程-文档中心-腾讯云

本文主要围绕我的纸条 history.js 进行讲解，更多详情请参见 我的纸条逻辑代码。
操作步骤 
1. data 数据的设计。
    active: true,  // 用来改变当前选中的样式
    dataListPut: [],  // 用来存put页面的数据
    dataListOut: [],
    schoolList: ["河南理工", "河南师范", "焦作师范"]
﻿
2. onload 生命周期的设计。
2.1 因为这个页面没有获取用户 openId 的功能，所以需要先判断下是否已经获取到了用户的 openId。如果没有，则直接跳到 index 页面获取 openId，并提示相应错误。
if(app.globalData.openId == ''){
      wx.switchTab({
        url: '/pages/index/index',
        success: res => {
        },
        fail: err => {
          wx.showToast({
            title: err,
            icon: 'error'
          })
        }
      })
    }
﻿
2.2 调用请求“我放入的纸条”的数据函数。
that.getPutData()
﻿
3. 通过小程序开放文档提供查询方式，用用户的 openId 来获取到数据，并且把获取到的数据，通过 that.setData 给到 dataListPut 供页面渲染。
查询方法
作用
limit 
来限制获取数据的条数
orderBy 
数据排序
// 获取数据put
  getPutData: function(e){
    const that = this
    db.collection('body_girl_yun').where({
      openId: app.globalData.openId
    }).limit(10).orderBy('time', 'desc').get().then(res => {
      console.log(res)
      if(res.data.length == 0){
        that.setData({
          dataListPut: res.data
        })
        return wx.showToast({
          title: '没有数据',
          icon: 'none'
        })
      }
      that.setData({
        dataListPut: res.data
      })
    }).catch(err=>{
      wx.showToast({
        title: '加载数据失败',
        icon: 'error'
      })
    })
  },
﻿
4. 删除纸条的逻辑实现。
4.1 实现删除提示。
wx.showModal({
         title: '提示',
         // content: '确认删除纸条?',
         content: '删除后友友大厅将不可见，确认?',
         success (res) {
﻿
     })
﻿
4.2 如果用户确认删除，用 remove 通过前端传过来的 _id，对应唯一一个数据，进行删除，包括基本的错误处理。否则提示取消删除。
 if (res.confirm) {
     db.collection("body_girl_yun").where({
         _id: _id
     }).remove().then(res => {
         wx.hideLoading()
         if(res.errMsg == 'collection.remove:ok'){
             that.getPutData()
         }else{
             wx.showToast({
                 title: '删除失败',
                 icon: 'error',
                 mask: true
             })
         }
     }).catch(
         console.error
     )
 } else if (res.cancel) {
     wx.showToast({
         title: '删除取消',
         icon: 'error',
         mask: true
     })
 }
}
﻿
5. 进行分页查询结合上划触底加载数据。
5.1 通过 onReachBottom 触发事件。
/**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if(this.data.active==true){
      this.getPutDataBottom()
    }else{
      this.getOutDataBottom()
    }
  },
﻿
5.2 通过 skip(pagePut * 10).limit(10) 中的 pagePut 参数来记录页数。
5.3 通过 concat 进行新旧数据的拼接，并更新到页面。
// 上划触底的事件
getPutDataBottom: function(){
    const that = this
    let pagePut = that.data.pagePut + 1
﻿
    db.collection('body_girl_yun').where({
        openId: app.globalData.openId
    }).skip(pagePut * 10).limit(10).orderBy('time', 'desc').get().then(res => {
        console.log(res)
        wx.hideLoading()
        // 如果还有数据
        if(res.data.length > 0){
                // 通过concat进行数据的拼接
            let all_data = that.data.dataListPut.concat(res.data)
            that.setData({
                dataListPut: all_data,
                pagePut: pagePut
            })
        }else{
            wx.hideLoading()
            wx.showToast({
                title: '没有更多数据',
                icon: 'none'
            })
        }
﻿
    })
},
﻿
6. 实现下拉刷新数据。
6.1 需要先在 app.json 文件里配置开启下拉刷新功能 enablePullDownRefresh。
"window": {
    "backgroundColor": "#FFCCFF",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#FFCCFF",
    "navigationBarTitleText": "校园交U",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": true
  },
﻿
6.2 用户 onPullDownRefresh 下拉触发请求数据的函数，重新获取数据。
/**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    if(this.data.active == true){
      this.getPutData("pull")
    }else{
      this.getOutData("pull")
    }
  },
﻿
﻿
查询方法	作用
limit	来限制获取数据的条数
orderBy	数据排序