微信小程序——分页组件的创建与使用

news2024/7/7 16:25:31

在这里插入图片描述

✅作者简介：2022年博客新星第八。热爱国学的Java后端开发者，修心和技术同步精进。
🍎个人主页：Java Fans的博客
🍊个人信条：不迁怒，不贰过。小知识，大智慧。
💞当前专栏：微信小程序学习分享
✨特色专栏：国学周更-心性养成之路
🥭本文内容：微信小程序——分页组件的创建与使用

文章目录

- 一、创建 pagination 分页组件
- - 1、前端页面 pagination.wxml 代码分享
  - 2、样式 pagination.wxss 代码分享
  - 3、逻辑 pagination.js 代码分享
- 二、使用 pagination 分页组件

一、创建 pagination 分页组件

在项目的根目录下创建一个名为 pagination 的文件夹，用于存放分页组件相关的文件。

在这里插入图片描述

1、前端页面 pagination.wxml 代码分享

在pagination文件夹中创建一个名为pagination.wxml的文件，用于编写分页组件的模板代码。可以参考以下示例代码：

<view class="pagination">
  <button class="prev-btn" bindtap="prevPage">上一页</button>
  <text class="page-info">{{currentPage}}/{{totalPage}}</text>
  <button class="next-btn" bindtap="nextPage">下一页</button>
</view>

在这个示例代码中，我们使用了小程序的<view>标签来创建一个容器，设置了一个名为pagination的class，用于设置分页组件的样式。

在容器中，我们使用了<button>标签来创建上一页和下一页按钮，并通过bindtap属性绑定了prevPage和nextPage方法。

在容器中，我们使用了<text>标签来显示当前页码和总页数，并通过双花括号{{}}的方式绑定了currentPage和totalPage变量。

2、样式 pagination.wxss 代码分享

在pagination文件夹中创建一个名为pagination.wxss的文件，用于编写分页组件的样式代码。可以参考以下示例代码：

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.prev-btn,
.next-btn {
  padding: 5px 10px;
  background-color: #ccc;
  color: #fff;
  border-radius: 5px;
  margin: 0 5px;
}

.page-info {
  font-size: 14px;
}

3、逻辑 pagination.js 代码分享

在pagination文件夹中创建一个名为pagination.js的文件，用于编写分页组件的逻辑代码。可以参考以下示例代码：

Component({
  properties: {
    total: {
      type: Number,
      value: 0
    },
    pageSize: {
      type: Number,
      value: 10
    },
    currentPage: {
      type: Number,
      value: 1
    }
  },
  methods: {
    prevPage() {
      if (this.data.currentPage > 1) {
        this.setData({
          currentPage: this.data.currentPage - 1
        });
        this.triggerEvent('change', { page: this.data.currentPage });
      }
    },
    nextPage() {
      if (this.data.currentPage < this.data.totalPage) {
        this.setData({
          currentPage: this.data.currentPage + 1
        });
        this.triggerEvent('change', { page: this.data.currentPage });
      }
    }
  },
  lifetimes: {
    attached() {
      this.setData({
        totalPage: Math.ceil(this.data.total / this.data.pageSize)
      });
    }
  }
});

在这个示例代码中，我们使用了小程序的Component方法来创建一个分页组件。在properties中定义了三个属性：total表示总记录数，pageSize表示每页显示的记录数，currentPage表示当前页码。

在methods中定义了两个方法：prevPage用于处理上一页按钮的点击事件，nextPage用于处理下一页按钮的点击事件。在这两个方法中，我们通过修改currentPage的值来实现页码的切换，并通过triggerEvent方法触发change事件，将当前页码传递给父组件。

在lifetimes的attached生命周期函数中，我们计算了总页数totalPage，并将其保存在组件的data中。

二、使用 pagination 分页组件

在这里插入图片描述

在小程序的页面中使用分页组件的步骤如下：

1、在小程序的页面中引入分页组件。 可以使用usingComponents关键字来引入组件，或者使用require方法动态引入组件。以下是两种引入方式的示例代码：
使用usingComponents关键字引入组件：

{
  "usingComponents": {
    "pagination": "/path/to/pagination"
  }
}

2、使用require方法动态引入组件：

const Pagination = require('/path/to/pagination');

3、在小程序的页面中使用分页组件。 可以在页面的wxml文件中使用<pagination>标签来引入分页组件，并通过属性绑定的方式传递数据和事件。以下是一个示例代码：

<view>
  <!-- 其他页面内容 -->
  <pagination total="{{total}}" current="{{currentPage}}" bind:change="onPageChange"></pagination>
</view>

在这个示例代码中，我们使用了<pagination>标签来引入分页组件。通过total属性传递总记录数，通过current属性传递当前页码，通过bind:change事件绑定方式绑定了onPageChange方法。

4、在小程序的页面中编写分页查询的逻辑代码。 可以在页面的js文件中编写分页查询的逻辑代码。以下是一个示例代码：

Page({
  data: {
    total: 100, // 总记录数
    currentPage: 1 // 当前页码
  },
  onPageChange(event) {
    const { page } = event.detail;
    // 根据页码查询数据
    // 更新页面数据
  }
});