原生微信小程序分页详细代码

以下是一个简单的微信小程序分页示例，包含了前端和后端代码：

前端代码：

index.wxml

<view class="container">
  <view class="list">
    <view wx:for="{{list}}" wx:key="{{index}}" wx:for-item="item">
      <view class="item">{{item}}</view>
    </view>
  </view>
  <view class="btn" wx:if="{{hasMore}}" bindtap="loadMore">加载更多</view>
  <view class="loading" wx:if="{{loading}}">正在加载中...</view>
</view>

index.js

// 定义全局变量
let page = 1
let limit = 10

Page({
  data: {
    list: [],
    hasMore: false,
    loading: false
  },
  onLoad: function() {
    // 第一次加载数据
    this.getData()
  },
  getData: function() {
    wx.showLoading({
      title: '正在加载中...'
    })
    this.setData({
      loading: true
    })
    wx.request({
      url: 'https://xxx.com/api/data',
      data: {
        page,
        limit
      },
      success: res => {
        wx.hideLoading()
        this.setData({
          loading: false
        })
        const data = res.data.data
        const list = this.data.list.concat(data)
        const total = res.data.total
        const hasMore = page * limit < total

        this.setData({
          list,
          hasMore
        })
      }
    })
  },
  loadMore: function() {
    page++
    this.getData()
  }
})

后端代码：

data.js

const data = [
  'item 1',
  'item 2',
  'item 3',
  'item 4',
  'item 5',
  'item 6',
  'item 7',
  'item 8',
  'item 9',
  'item 10',
  'item 11',
  'item 12',
  'item 13',
  'item 14',
  'item 15',
  'item 16',
  'item 17',
  'item 18',
  'item 19',
  'item 20',
  'item 21',
  'item 22',
  'item 23',
  'item 24',
  'item 25',
  'item 26',
  'item 27',
  'item 28',
  'item 29',
  'item 30'
]

module.exports = (req, res) => {
  const page = parseInt(req.query.page) || 1
  const limit = parseInt(req.query.limit) || 10

  const start = (page - 1) * limit
  const end = start + limit

  const result = {
    code: 0,
    data: data.slice(start, end),
    total: data.length
  }

  res.json(result)
}

注意：

1. 数据库表需要提供总数；
2. 该示例中为了方便，数据直接在服务器端定义；
3. 分页的参数根据需要进行修改；
4. 更多分页控件的使用方法，可以参考官方文档。