开发指南

API 文档

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

最近更新时间:2022-01-26 14:12:05

本文主要围绕我的纸条 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")
      }
      },