小程序云开发实现列表分页展示数据是一个常见的需求,通过上一页和下一页的方式可以让用户方便地浏览大量的数据。在本文中,我将介绍如何使用小程序云开发来实现这一功能。首先咱们先看效果图

3d6fab9969be486ab52db0060806d062.png

 首先,我们需要在小程序云开发中的数据库里创建一个集合(Collection),用来存储我们的数据。在集合中,每个文档(Document)代表一个数据项,我们可以在其中存储相关的字段。举个例子c38fd6c595794879a965241b0e0e86c5.png

 接下来,我们需要在小程序的前端页面中添加上一页和下一页的按钮,供用户点击。当用户点击按钮时,我们将触发相应的事件来获取下一页或上一页的数据,这里需要根据所在页面与总共页面进行一个判断,来显示上一页和下一页(例如第一页的时候是没有上一页的,最后一页是没有下一页的)

d7d558cb55ff4e84ab270fb817e418cd.png

 (这里只显示上一页,进行了条件渲染)

 

在小程序的前端页面中,我们可以使用 wx.cloud.callFunction 方法来调用云函数,也可以不调用云函数直接使用SDK(wx.cloud.database.collection())。我们需要在云函数中编写查询数据的逻辑,并将查询结果返回给前端页面。


下面是一个简单的示例,演示了如何实现基于云开发的列表分页展示功能:

1. 创建集合和文档

在小程序云开发的控制台中,创建一个集合(例如 "list"),并在集合中添加一些文档。每个文档可以包含一些字段,例如 "title"、"content" 等。

2. 前端页面

在前端页面中,添加上一页和下一页的按钮,并为按钮绑定相应的点击事件。其中wx:if为条件渲染,currentPage是一个变量,表示页面当前页,totalye也是一个常量,表示总页面数

<view  style="width: 100%;display: flex;justify-content: center;flex-direction: row;align-items: center;margin: 50rpx 0;">
    <view bindtap="golast" wx:if="{{currentPage+1 != 1 && currentPage}}" style="padding: 4rpx 14rpx;border: 2rpx solid #8a8a8a;border-radius: 10rpx;font-size: 20rpx;">上一页</view>
    <view style="font-size: 20rpx;margin: 0 20rpx;">{{currentPage+1}}/{{totalye}}</view>
    <view bindtap="gonext" wx:if="{{currentPage+1 != totalye && totalye}}" style="padding: 4rpx 14rpx;;border: 2rpx solid #8a8a8a;border-radius: 10rpx;font-size: 20rpx;">下一页</view>
</view>

3. 前端页面的 JavaScript 代码

在前端页面的 JavaScript 代码中,我们需要定义上一页和下一页的点击事件,并调用云函数来获取数据。

Page({
  data: {
    pageSize : 10,
    currentPage:0,
    totalye:1
    dataList: [] // 存储数据的数组
  },

  // 上一页
  golast(){
    var currentPage = this.data.currentPage -1
 
    
    this.setData({
      currentPage:currentPage
    })
    this.onPullDownRefresh()
  },

   // 下一页
  gonext(){
    var currentPage = this.data.currentPage + 1
 
    
    this.setData({
      currentPage:currentPage
    })
    this.onPullDownRefresh()
  },
  // 获取数据列表
  //  获取列表数据
        getData(){
          var that =this;
           wx.cloud.database().collection("uni-textbox")
           .orderBy('time','desc')
               .skip(that.data.currentPage * that.data.pageSize)
               .limit(that.data.pageSize)
               .get({
                 success(res){
  
                   let list =that.data.dataList.concat(res.data)
                
                
                      that.setData({
                        dataList:list,
                        loading:false
                      })
                   
                    
         
                   
                 },
                fail(err){
                  wx.showToast({
                    title: '加载失败!'+err,
                    icon:'error'
                  })
                }
              })
          
            
          },
      
         // 每当点击上一页或下一页时候,清空数据组并重新赋值
        onPullDownRefresh() {
          var that = this
      
          this.setData({
            dataList:[],
          })
      
          setTimeout(function(){
            wx.stopPullDownRefresh(
            that.getData(),
          )},100)
      
        },
  // 页面加载时获取第一页数据
  onLoad() {
    this.init();
  },
  // 页面初始化
  init(){
    var that = this

    //这里直接用API进行查询操作
    wx.cloud.database().collection('uni-textbox').count().then(res => {
 
       //统计有多少个数据
       // 这里pageSize是每页容量
       // totalye就是总的页数
      this.setData({
        totalye:Math.ceil(res.total / that.data.pageSize),
      })
      
      // 分页查询
      wx.cloud.database().collection("uni-textbox")
      .orderBy('time','desc')
          .skip(that.data.currentPage * that.data.pageSize)
          .limit(that.data.pageSize)
          .get({
            success(res){
            
              let list =that.data.dataList.concat(res.data)
           
                 that.setData({
                   dataList:list,
                   loading:false
                 });   
          
           },
           fail(err){
             wx.showToast({
               title: '加载失败!'+err,
               icon:'error'
             })
           }
          })
     
        
    })
  },

});


通过以上步骤,我们就可以实现一个简单的列表分页展示功能。用户可以点击上一页和下一页按钮来浏览不同页的数据。

需要注意的是,以上示例是一个简单的实现方法,实际项目中可能需要根据具体需求进行调整和优化,例如添加加载中的状态、处理边界情况等。

希望本文对你有所帮助,祝你在小程序云开发中实现列表分页展示数据的功能顺利!

 

更多推荐