云开发（微信-小程序）笔记（十一）---- 分页，不简单啊

云开发（微信-小程序）笔记（十）---- 刷新中

1.基础操作与云函数区别

分页可以运行数据库的简单操作进行查询，也可用云函数进行查询。

重点：基础操作输出的只有20条数据，云函数可以自定义，最高100条

接下来我就从基础操作与云函数两方面进行分页的编写
首先需要自己准备个数据集num,上传到云数据库
我的数据库，免费下载！

2.基础操作进行分页

1.编写js部分

// pages/fenye/fenye.js
Page({
  data: {
    list: []
  },
  onLoad(options) {
    this.getList()
  },
  getList() {
    wx.showLoading({
      title: '加载中...',
    })
    let len = this.data.list.length
    console.log('当前list的长度', len)
    wx.cloud.database().collection('num')
      .skip(len)
      .get()
      .then(res => {
        console.log('请求成功', res)
        //成功就隐藏‘加载中’的提示
        wx.hideLoading()
        //如何最新返回的数据为空，就提示
        if (res.data <= 0) {
          wx.showToast({
            icon: 'none',
            title: '已经掏空了！',
          })
        }
        //携带的数据
        this.setData({
          list: this.data.list.concat(res.data) //数据的追加，如1 => 1,2 => 1,2,3
        })
      })
      .catch(res => {
        //失败也隐藏‘加载中’的提示
        wx.hideLoading()
        console.log('请求失败', res)
      })
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    this.getList()
    console.log('sss')
  }
})

2.修改wxml部分

<!--pages/fenye/fenye.wxml-->
<view wx:for="{{list}}">
  <view class="num">
    {{item.num}}  
  </view>
</view>

3.修改wxss部分

.num{
  height: 200px;
  background-color: gold;
  border-bottom: 1px solid red;
}

3.云函数进行分页

1.修改js部分

// pages/fenye-yun/fenye-yun.js
Page({
  data: {
    list: []
  },
  onLoad(options) {
    this.getList()
  },
  getList() {
    wx.showLoading({
      title: '加载中...',
    })
    let len = this.data.list.length
    console.log('当前list的长度', len)

    //调用云函数
    wx.cloud.callFunction({
      name: 'fenye',
      data: {
        len: len, //数据索引
        pageNum: 50, //每页加载多少条数据
     }
    }).then(res => {
        wx.hideLoading()
        console.log('请求成功', res.result.data)
        let dataList = res.result.data
        if (dataList <= 0) {
          wx.showToast({
            icon: 'none',
            title: '已经掏空了！',
          })
        }
        //携带的数据
        this.setData({
          list: this.data.list.concat(dataList) //数据的追加，如1 => 1,2 => 1,2,3
        })
      })
      .catch(res => {
        wx.hideLoading()
        console.log('请求失败', res)
      })
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    this.getList()
  }
})

2.编写云函数的index.js ,
千万不要忘了上传到云上，进行云函数的部署

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

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV 
})

// 云函数入口函数
exports.main = async (event, context) => {
  return await cloud.database().collection('num')
    .skip(event.len) //数据索引
    .limit(event.pageNum) //每页加载多少条数据
    .get()
}

3.修改wxml部分

<!--pages/fenye-yun/fenye-yun.wxml-->
<view wx:for="{{list}}" wx:key="index">
  <view class="num">
    {{item.num}}  
  </view>
</view>

4.修改wxss部分

/* pages/fenye-yun/fenye-yun.wxss */
.num{
  height: 200px;
  background-color: gold;
  border-bottom: 1px solid red;
}

云开发（微信-小程序）笔记（十二）---- 搜索

感谢大家，点赞，收藏，关注，评论！