微信小程序分页和响应式更新数据

案例： 下拉触底获取数据、点击盒子数据hot ++，页面同步更新。

获取数据（分页获取）

// 云函数getData
/* index.js */


// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) // 使用当前云环境
const db = cloud.database();
// 云函数入口函数
// event接收调用者传来的值
exports.main = async (event, context) => {
  // 一次获取num条数据
  let num = event.num;
  // 分页
  let page = event.page

return await db.collection('demolist').limit(num).skip(page).get();
}

//页面
/* demo.js */


 ...
 data: {
    dataList: []
 }

 onLoad(options) {
  // 首次获取数据
    this.getData();
  },
  
  
  // 获取数据
  // 默认值num=5，page=0
  // 带参数调用则覆盖默认值，不带参数调用则使用默认值
 getData(num = 5, page = 0) {
     // 使用云函数
    wx.cloud.callFunction({
      name: 'getData',
      // 传值给云函数
      data: {
        num: num,
        page: page
      }
    }).then(res => {
     // 旧函数
      let oldData = this.data.dataList;
      //使用解构拼接新获取的数据
      let newData = [...oldData, ...res.result.data]
      this.setData({
        dataList: newData
      })
    })
  }
  ...

上拉拼接数据

 /**
   * 页面上拉触底事件的处理函数
   */
 onReachBottom() {
    let page = this.data.dataList.length
    this.getData(5, page)
  }

更新数据

点击盒子更新该盒子的某个数据

• 需要获取该盒子的id来告诉数据库点击的是哪一个盒子，从而正确修改数据。
• 需要获取该盒子的索引值index来正确地渲染新数据到指定盒子。

// 云函数updateData
/* index.js */


// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) // 使用当前云环境
const db = cloud.database();
const _ = db.command;
// 云函数入口函数
exports.main = async (event, context) => {
  let num = event.num;
  let id = event.id;
return await db.collection('demolist').doc(id).update({
  data: {
   // hot字段自增num
    hot: _.inc(num)
  }
})
}

<!-- demo.html -->


<!-- 通过data-变量名来传递自定义变量 -->
<!--   可在点击事件中获取该变量 -->
<view class="box" 
    data-id="{{item._id}}" 
    data-idx="{{index}}"  
    wx:for="{{dataList}}" 
    wx:key="_id"
    bindtap="clickUpdate"
>
...
</view>

/* demo.js */


clickUpdate(e) {
    // 打印事件对象
    //自定义变量存储在e.currentTarget.dataset中
    console.log(e);
    
    //解构获取变量
    let {
      id,
      idx
    } = e.currentTarget.dataset;
    
    // 调用云函数更新数据库数据
    wx.cloud.callFunction({
      name: 'updateData',
      data: {
        num: 1,
        id: id
      }
    })
    
    //更新页面数据
    db.collection('demolist').where({
      _id: id
    }).watch({
      onChange: res => {
       // 动态修改数组中某个对象的某个属性
        let obj = 'dataList['+idx+'].hot';
        // 修改后的最新数据在res.docs中
        console.log(res.docs);
        this.setData({
          [obj]: res.docs[0].hot
        })
      },
      onError: err => {}
    })