微信小程序分页

本文主要介绍微信小程序如何分页获取数据。Git项目地址
扫码体验Demo小程序

一、表数据

suject题目表

{"_id":"0ayVvucaRNEceEzD4dMn1tUS1pZG3VcrqXdpXfrtmk9YHyDD","question":"正方形是有角的图形，这个图形没有角。所以，这个图形是个圆。","option":[{"key":"A","value":"Yes"},{"key":"B","value":"No"}],"answer":"B","analysis":"没有角的图形有很多","status":"1","position":70,"create_at":"2020-05-11 15:46:36","update_at":"2020-05-11 15:46:36"}
{"_id":"0e5d9911-34cd-4e83-b056-ba0d6c634878","answer":"C","analysis":"两个孩子可能情况为（男，男）（男，女）（女，男）（女，女），又已知其中一个是女的，故排除（男，男），剩下三种情况两个是符合的，故2/3","status":"1","create_at":"2020-03-27 15:46:36","update_at":"2020-03-27 15:46:36","question":"有一对夫妇，先后生了两个孩子，其中一个孩子是女孩，另一个孩子是男孩的概率是多少?","option":[{"key":"A","value":"1/2"},{"key":"B","value":"1/3"},{"key":"C","value":"2/3"},{"key":"D","value":"3/4"}],"position":5.0}
{"_id":"1AylrC3OIgv2nrQEe2v6qBRqPZxZKR5LkOuggoqbkJnfwmP6","question":"韦利是个和斯坦一样强的棒球击球手，斯坦是个比大多数人都要强的棒球击球手。所以，斯坦应是这些选手中最出色的。","option":[{"key":"A","value":"Yes"},{"key":"B","value":"No"}],"answer":"B","analysis":"斯坦只比大多数人强，中等偏上","status":"1","position":65,"create_at":"2020-05-11 15:46:36","update_at":"2020-05-11 15:46:36"}
{"_id":"1fWuVJVFUKOUmjfdRaqnAiLPr15XlNtZwKtru3ctduX48fcn","question":"绿色深时，红色就浅；黄色浅时，蓝色就适中；但是要么绿色深，要么黄色浅。所以，红色浅，或者蓝色适中。","option":[{"key":"A","value":"Yes"},{"key":"B","value":"No"}],"answer":"A","analysis":"无","status":"1","position":78,"create_at":"2020-05-11 15:46:36","update_at":"2020-05-11 15:46:36"}
{"_id":"29ca2b1c-ebab-4b7d-bd96-8b0b668089c2","status":"1","create_at":"2020-03-27 15:46:36","update_at":"2020-03-27 15:46:36","analysis":"排列组合，C(45,2)","question":"一次朋友聚会，大家见面时总共握手45次。如果参加聚会的人和其余的每个人只握手一次，问参加聚会的共有多少人？","option":[{"key":"A","value":"22"},{"key":"B","value":"11"},{"key":"C","value":"12"},{"key":"D","value":"10"}],"answer":"D","position":3.0}
{"_id":"2G1Yeqpw97xK7iIsq89qBZmlgq2GFOdBNg8sopjHS63UrDTT","question":"前进不见得死得光荣,后退没死也不见得是耻辱。所以,后退意为死得光荣。","option":[{"key":"A","value":"Yes"},{"key":"B","value":"No"}],"answer":"B","analysis":"可能是耻辱","status":"1","position":99,"create_at":"2020-05-11 15:46:36","update_at":"2020-05-11 15:46:36"}
{"_id":"2NqPCHgKe4Gej83LAK6tDq44OCGrQhgzFSGrU4ItYJqi1zlB","question":"一个在运动中骨折的患者（女性）康复出院了，家里庆祝并大摆宴席。喝饮料的时候，患者的哥哥说今天的可乐怎么味道有点怪，然后患者的父亲和母亲也喝了纷纷表示可乐味道的确不对。但患者喝后坚称味道正常。患者死于当天晚上洗澡的澡盆里。为什么？","option":[{"key":"A","value":"已知，下一题"},{"key":"B","value":"查看解析"}],"answer":"A","analysis":"患者在受伤过程中，把感觉神经也给弄坏了，感觉不到味道和疼痛，在泡澡过程中，水太热，被烫死了","status":"1","position":56,"create_at":"2020-05-07 15:46:36","update_at":"2020-05-07 15:46:36"}
{"_id":"2c8JA7ky2BNmiSlpIQRcktzvZ53KHe2h8zlbPkt5T3puoXvV","question":"从前有一个女人，他的老公非常喜欢搞外遇，这个女人实在忍受不了这种状况，就决定吃药自杀，自杀前他留了一封遗书给她的初恋情人。初恋情人看到遗书后，十万火急地赶到女人家里，还好女人没有死，女人看到初恋情人来了表现得很激动，二人缠绵不已。初恋情人对女人说他一定帮忙教训她的老公。第二天，警察登门，告诉女人说她老公已经死了，在和情妇幽会的时候死了。请问这是怎么一回事？","option":[{"key":"A","value":"已知，下一题"},{"key":"B","value":"查看解析"}],"answer":"A","analysis":"女人将毒药藏在普通瓶子里以掩饰毒药，然后把药服了。她等待着死亡的到来，可是她的身体没有出现丝毫痛苦的征兆，相反，却有一种微妙的藏东在上升。这时她的初恋男友来了，女人见了男友表现的十分热情，主动和他唱秒。而在另一个角落，女人的老公和情妇也要将上演另一幕激情戏的时候，男人拿出了事先准备好的秘密武器---平日藏在柜子里装在普通瓶子里以掩饰的春药，这一次，他像往常一样吞了一粒，可是没过多久，他突然全身痉挛，表情极为痛苦，过了一会就死了。","status":"1","position":46,"create_at":"2020-05-07 15:46:36","update_at":"2020-05-07 15:46:36"}
{"_id":"2f826e24-397c-43d6-8193-1014ce858759","status":"1","create_at":"2020-03-27 15:46:36","update_at":"2020-03-27 15:46:36","question":"36匹马赛跑，跑道同时只能容许6匹马。而且36匹马速度不同，但是每次跑的速度恒定。问不计时跑多少次可以选出第一，第二，第三名？","option":[{"key":"A","value":"7"},{"key":"B","value":"8"},{"key":"C","value":"9"},{"key":"D","value":"6"}],"answer":"B","analysis":"36匹马，分6组，赛6次，留下每组前3名；6个小组的第一名赛一次，选出前三，这3组可以去争夺前3名，从第一组选出3名，从第二名组选出前2名，从第三名组选第一名赛一次，前三就是第一名、第二名、第三名","position":12.0}
{"_id":"33242856-03df-49ad-b409-75e20455fbea","status":"1","create_at":"2020-03-27 15:46:36","update_at":"2020-03-27 15:46:36","question":"在一个平面上有三个不在一条直线上的点。请问在这个平面能够作出几条与这些点距离相同的线？","option":[{"key":"A","value":"1"},{"key":"B","value":"0"},{"key":"C","value":"2"},{"value":"3","key":"D"}],"answer":"D","analysis":"三角形的三条中垂线的交点到三个点的距离相等","position":4.0}
{"_id":"33d27b4d-d22d-4def-ac32-49e7a0a1fcdf","update_at":"2020-03-27 15:46:36","question":"1元钱一瓶汽水，喝完后两个空瓶换1瓶汽水，你有20元钱，最多可以喝到几瓶水？(可以借)","option":[{"key":"A","value":"40"},{"key":"B","value":"38"},{"key":"C","value":"39"},{"key":"D","value":"37"}],"answer":"A","analysis":"先买20瓶，再借20个空瓶去换20瓶，再还20个空瓶，所以可以喝40瓶水","status":"1","create_at":"2020-03-27 15:46:36","position":10.0}
{"_id":"3FSAYgEna4l1uyLaZvk7tU9s97hH8ikBiAZyH0EnrPHHaFsI","question":"水平高的音乐家演奏古典音乐，要成为水平高的音乐家就得练习演奏。所以演奏古典音乐比演奏爵士乐需要更多的练习时间。","option":[{"key":"A","value":"Yes"},{"key":"B","value":"No"}],"answer":"B","analysis":"看天赋","status":"1","position":67,"create_at":"2020-05-11 15:46:36","update_at":"2020-05-11 15:46:36"}
{"_id":"3HeRjxEADVVhVxoAHWKuyFq4y51rWQelhMXtI3UHoDoPCDW9","question":"我住在农场和城市之间，农场位于城市和机场之间。所以，我的住处到农场比到机场要近。","option":[{"key":"A","value":"Yes"},{"key":"B","value":"No"}],"answer":"A","analysis":"无","status":"1","position":84,"create_at":"2020-05-11 15:46:36","update_at":"2020-05-11 15:46:36"}
{"_id":"5MWFCg2NYcxbXA06AeTN3Inv6AHh9zwoDfgFUBYi8QK2NYAF","question":"当B等于Y时,A等于Z;当A不等于Z时,E要么等于Y,要么等于Z。所以, 当B不等于Y时,E不等于Y也不等于Z。","option":[{"key":"A","value":"Yes"},{"key":"B","value":"No"}],"answer":"B","analysis":"当B不等于Y时，A不等于Z，E要么等于Y,要么等于Z","status":"1","position":90,"create_at":"2020-05-11 15:46:36","update_at":"2020-05-11 15:46:36"}

二、首页分页

1. 在index.json文件里设置页面上拉触底事件触发时距页面底部距离为50px

2. 创建list云函数，获取分页数据。请求参数为startId(从哪条记录开始，默认为0)，每页数据为15条，只获取所需要的列(_id,question,position)，减轻流量。```备注：创建新的云函数后一定要执行 npm install --save wx-server-sdk@latest```

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

const db = cloud.database()
const _ = db.command
const $ = db.command.aggregate

// 云函数入口函数
exports.main = async (event, context) => {
    var startId = parseInt(event.startId)
    
    const subject = await getListByStartId(startId)
    return {subject:subject.result.list}
}

function getListByStartId(startId, size=15, field={ question: 1, position: 1 }) {
  if (startId > 0) {
    return db.collection('subject').aggregate()
      .match({
        position: _.lt(startId)
      })
      .sort({ position: -1 })
      .limit(size)
      .project(field).end()
  }

  return db.collection('subject').aggregate()
    .sort({ position: -1 })
    .limit(size)
    .project(field).end()
}

3. 设置页面初始数据，questionList-题目列表，lastId-题目最后一个Id，noMore-全部加载

Page({
  data: {
    questionList: null,
    lastId: 0,
    noMore: false
  }
 )}

4. 获取列表数据。当列表数据为空时，设置noMore为true; 当列表不空时，lastId为list[list.length - 1].position(position为排序的值), 将获取到的list数据concat进questionList。

Page({
  data: {
    questionList: null,
    lastId: 0,
    noMore: false
  },
  onShow: function () {
    this.setData({ 
      questionList: null,
      lastId: 0,
      noMore: false
     });
    this.getList()
  },
  getList: function () {
    wx.cloud.callFunction({
      name: 'list',
      data: {
        startId: this.data.lastId
      },
    })
      .then(res => {
        if (res.result == null || res.result.subject.length <= 0) {
          this.setData({ noMore: true })
          return;
        }

        let list = res.result.subject
        this.setData({lastId: list[list.length - 1].position}) 
        if (this.data.questionList !== null) {
          this.setData({
            questionList: this.data.questionList.concat(list)
          })
        } else {
          this.setData({ questionList: list });
        }
      })
      .catch(res => {
        wx.showToast({
          title: '系统异常，请稍后重试',
          icon: 'none',
          duration: 2000
        })
      })
  }
})

5. 设置触底事件，当noMore为true时，不再请求数据

Page({
  data: {
    questionList: null,
    lastId: 0,
    noMore: false
  },
  onShow: function () {
    this.setData({ 
      questionList: null,
      lastId: 0,
      noMore: false
     });
    this.getList()
  },
  onReachBottom: function (e) {
    if (this.data.noMore) {
      return;
    }
    this.getList()
  },
  getList: function () {
    wx.cloud.callFunction({
      name: 'list',
      data: {
        startId: this.data.lastId
      },
    })
      .then(res => {
        if (res.result == null || res.result.subject.length <= 0) {
          this.setData({ noMore: true })
          return;
        }

        let list = res.result.subject
        this.setData({lastId: list[list.length - 1].position}) 
        if (this.data.questionList !== null) {
          this.setData({
            questionList: this.data.questionList.concat(list)
          })
        } else {
          this.setData({ questionList: list });
        }
      })
      .catch(res => {
        wx.showToast({
          title: '系统异常，请稍后重试',
          icon: 'none',
          duration: 2000
        })
      })
  }
})

6. 页面wxml展示

index.wxml

<view class="title">题目</view>
<view class = "list-body">
  <block wx:for="{{questionList}}" wx:key="_id">
    <navigator class="navigator-block"  url="../question/detail?id={{item._id}}&type=all">
     <view class="question-redirect">{{item.question}}</view>
    </navigator>
  </block>
</view>
<view class="no-more">
      <view wx:if="{{noMore}}">我们是有底线的呦～</view>
</view>

index.wxss

 page {
    background-color: #f8f8f8;
  }
.list-body {
   background-color: #fff;
   margin-top: 15px; 
}
.navigator-block {
  border-bottom: 1px solid rgb(231, 227, 227);
  display: flex;
  flex-direction: row;
  height:40px;
  margin-left:5px;
}
.question-redirect {
  font-size:13px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space:nowrap;
  width: 90%;    
  margin-left:10px;
  line-height: 40px;
}
.list-detail{
   transform: rotate(45deg);
   border-right:  1px solid  #BDBDBD;
   border-top: 1px solid  #BDBDBD;
   width:8px;
   height:8px;
   float:right;
   margin-top:15px;
}
.no-more{
    color: #999;
    text-align: center;
    margin-top: .1rem;
    font-size: .1rem;
}
.title{
    margin-top: 20px;
    font-size: 15px;
    color: #333;
    line-height: .22rem;
    padding: .1rem .15rem;
    font-weight: 700;
}

微信小程序分页

小青蛙

引用和评论

微信小程序文本换行

开发微信小程序项目遇到的问题(更新中)

批量检查微信小程序是否被封的Go代码

微信小程序数据可视化-echarts动态渲染和按需加载

uniapp集成保利威直播SDK，ios为什么不能后台挂起uniapp插件？

微信小程序自定义Tabbar

微信小程序observers监听数据变化