步骤5：我的纸条页面逻辑处理

本文主要围绕我的纸条 history.js 进行讲解，更多详情请参见 我的纸条逻辑代码。

操作步骤

1. data 数据的设计。
   active: true,  // 用来改变当前选中的样式
      dataListPut: [],  // 用来存put页面的数据
      dataListOut: [],
      schoolList: ["河南理工", "河南师范", "焦作师范"]

2. onload 生命周期的设计。
   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. 调用请求“我放入的纸条”的数据函数
      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. 删除纸条的逻辑实现。
   1. 实现删除提示。
      wx.showModal({
               title: '提示',
               // content: '确认删除纸条?',
               content: '删除后友友大厅将不可见，确认?',
               success (res) {
      
           })

   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. 进行分页查询结合上划触底加载数据。
   1. 通过 onReachBottom 触发事件。
      /**
         * 页面上拉触底事件的处理函数
         */
        onReachBottom: function () {
          if(this.data.active==true){
            this.getPutDataBottom()
          }else{
            this.getOutDataBottom()
          }
        },

   2. 通过 skip(pagePut * 10).limit(10) 中的 pagePut 参数来记录页数。
   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. 实现下拉刷新数据。
   1. 需要先在 app.json 文件里配置开启下拉刷新功能 enablePullDownRefresh。
      "window": {
          "backgroundColor": "#FFCCFF",
          "backgroundTextStyle": "light",
          "navigationBarBackgroundColor": "#FFCCFF",
          "navigationBarTitleText": "校园交U",
          "navigationBarTextStyle": "black",
          "enablePullDownRefresh": true
        },

   2. 用户 onPullDownRefresh 下拉触发请求数据的函数，重新获取数据。
      /**
         * 页面相关事件处理函数--监听用户下拉动作
         */
        onPullDownRefresh: function () {
          if(this.data.active == true){
            this.getPutData("pull")
          }else{
            this.getOutData("pull")
          }
        },