简洁高效的微信小程序分页器封装实践

news2024/11/17 11:01:40

前言

在现今的移动应用开发中，微信小程序已经成为了一个备受欢迎的平台。然而，随着应用的复杂性增加，数据的管理和加载成为了一个问题。本文将探讨微信小程序中的一个关键概念：封装分页器，它是提升小程序性能和用户体验的不可或缺的工具之一。通过深入了解分页器的工作原理以及如何正确地封装和使用它，大家将能够更好地管理和加载数据，从而为你的小程序带来更出色的性能和用户体验。

实现效果

在这里插入图片描述

封装公共方法

wxml 文件

首先，在视图层（WXML）中，创建了一个包含分页相关元素的自定义组件，包括总数据条数的展示、每页显示条数的下拉框、当前页码的展示、上一页和下一页的按钮、前往页码的输入框。

<view class="mainBox">
  <view class="paginationBox">
    <view class="totalBox">共 {{total}} 条</view>
    <view class="selectPageBox">
      <picker bindchange="handlePageSizeChange" value="{{pageSizeIndex}}" range="{{pageSizes}}">
        <view>{{pageSizes[pageSizeIndex]}}条/页</view>
      </picker>
    </view>
    <view class="contantBox">
      <view style="color:{{pageNum<=1 ? 'rgb(194,201,213)' : 'rgb(25, 137, 250)'}}" class="updownPageBox" bindtap="prevPage">
        <van-icon name="arrow-left" />
      </view>
      <view class="pageBox">{{pageNum}}</view>
      <view style="color:{{pageNum >= (total / pageSize) ? 'rgb(194,201,213)' : 'rgb(25, 137, 250)'}}" class="updownPageBox" bindtap="nextPage">
        <van-icon name="arrow" />
      </view>
    </view>
    <view class="intBox">
      <text>前往</text>
      <input class="intConBox" bindconfirm="handlePageConfirm" type="number" />
      <text>页</text>
    </view>
  </view>
</view>

js 文件

  • 在组件的属性（properties）中定义了三个属性：total、pageSize、pageNum，用于控制分页的相关数据。其中，total 表示总数据条数，pageSize 表示每页显示条数，pageNum 表示当前页码。同时，在 pageNum 属性中定义了一个观察者函数，用于在 pageNum 属性变化时更新数据中的 pageNum；
  • 定义了数据（data）中的一些变量，包括每页显示条数选项 pageSizes 和默认选中的每页显示条数 pageSizeIndex；
  • 在 methods 中定义了一些方法，实现了分页功能：
    • prevPage 方法：用于点击上一页按钮，减小 pageNum，但要确保 pageNum 大于 1，触发自定义事件 pageChange 传递当前页码信息；
    • nextPage 方法：用于点击下一页按钮，增加 pageNum，但要确保 pageNum 小于最大页数，触发自定义事件 pageChange 传递当前页码信息；
    • handlePageSizeChange 方法：用于选择每页显示条数的下拉框，更新 pageSize 和 pageSizeIndex，触发自定义事件 pageSizeChange 传递每页显示条数信息；
    • handlePageConfirm 方法：用于页码输入框的确认操作，获取输入的页码并转换为整数，确保输入的页码在有效范围内，然后更新 pageNum，触发自定义事件 pageChange 传递当前页码信息；
    • 自定义事件 pageChange 和 pageSizeChange 可以在使用该组件的父组件中监听，以便在分页信息发生变化时执行相应的逻辑操作。
Component({
  properties: {
    total: { // 总数据条数
      type: Number, // 数据类型为数字
      value: 0 // 默认值为0
    },
    pageSize: { // 每页显示条数
      type: Number, // 数据类型为数字
      value: 10 // 默认值为10
    },
    pageNum: { // 当前页码
      type: Number, // 数据类型为数字
      value: 1, // 默认值为1
      observer(newVal) { // 当pageNum属性变化时触发的观察者函数
        this.setData({
          pageNum: newVal // 更新数据中的pageNum
        });
      }
    }
  },
  data: {
    pageSizes: [5, 10, 15, 20], // 每页显示条数选项
    pageSizeIndex: 1, // 默认选中的每页显示条数
  },
  methods: {
    // 上一页
    prevPage() {
      if (this.data.pageNum > 1) { // 如果当前页码大于1
        this.setData({
          pageNum: this.data.pageNum - 1 // 减小pageNum
        });
        this.triggerEvent('pageChange', { // 触发名为'pageChange'的自定义事件，传递当前页码信息
          page: this.data.pageNum
        });
      } else {
        wx.showToast({
          title: '已经是第一页',
          icon: 'none'
        });
      }
    },
    // 下一页
    nextPage() {
      const maxPage = Math.ceil(this.data.total / this.data.pageSize); // 计算最大页数
      if (this.data.pageNum < maxPage) { // 如果当前页码小于最大页数
        this.setData({
          pageNum: this.data.pageNum + 1 // 增加pageNum
        });
        this.triggerEvent('pageChange', { // 触发名为'pageChange'的自定义事件，传递当前页码信息
          page: this.data.pageNum
        });
      } else {
        wx.showToast({
          title: '已经是最后一页',
          icon: 'none'
        });
      }
    },

    // 每页显示条数下拉框
    handlePageSizeChange(event) {
      const index = event.detail.value; // 获取选择的索引
      const pageSize = this.data.pageSizes[index]; // 获取对应索引的每页显示条数
      this.setData({
        pageSize, // 更新pageSize
        pageSizeIndex: index, // 更新pageSizeIndex
      });
      this.triggerEvent('pageSizeChange', { // 触发名为'pageSizeChange'的自定义事件，传递每页显示条数信息
        pageSize
      });
    },
    // 页码输入框
    handlePageConfirm(event) {
      const inputValue = event.detail.value.trim(); // 获取去掉前后空格的输入值
      if (inputValue === '') {
        // 如果输入值为空，则不执行查询操作
        return;
      }
      const page = parseInt(inputValue); // 获取输入的页码并转换为整数
      const maxPage = Math.ceil(this.data.total / this.data.pageSize); // 计算最大页数
      if (page >= 1 && page <= maxPage) { // 如果输入的页码有效
        this.setData({
          pageNum: page // 更新pageNum
        });
        this.triggerEvent('pageChange', { // 触发名为'pageChange'的自定义事件，传递当前页码信息
          page
        });
      } else {
        wx.showToast({
          title: '请输入有效页数',
          icon: 'none'
        });
      }
    }

  }
});

wxss 文件

.paginationBox {
  margin-top: 20rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.totalBox {
  color: #606266;
  height: 48rpx;
  line-height: 48rpx;
}

.selectPageBox {
  border: 2rpx solid #dcdfe6;
  margin: 0rpx 14rpx;
  color: #606266;
  padding: 0rpx 18rpx;
  text-align: center;
  height: 44rpx;
  line-height: 44rpx;
  border-radius: 4rpx;
}

.contantBox {
  display: flex;
}

.updownPageBox,
.pageBox {
  padding: 0rpx 14rpx;
  color: rgb(25, 137, 250);
  background-color: rgb(244, 244, 245);
  height: 48rpx;
  line-height: 48rpx;
  border-radius: 4rpx;
}

.pageBox {
  margin: 0rpx 10rpx;
}

.intBox {
  margin-left: 14rpx;
  color: #606266;
  display: flex;
  align-items: center;
}

.intBox input {
  height: 44rpx;
  line-height: 44rpx;
  min-height: 44rpx;
}

.intConBox {
  border: 2rpx solid #dcdfe6;
  border-radius: 4rpx;
  width: 60rpx;
  text-align: center;
  margin: 0rpx 6rpx;
}

app.json 文件全局引用

"usingComponents": {
    "pagination": "./components/pagination/index"
},

任意文件使用

wxml 文件

<view class="tableBox">
    <scroll-view scroll-x>
        <view class="table">
            <view class="tableRow">
                <text class="tableNavBox">Header 1</text>
                <text class="tableNavBox">Header 2</text>
                <text class="tableNavBox">Header 3</text>
            </view>
            <view class="tableRow" wx:for="{{list}}" wx:key="index">
                <text class="tableCellBox">{{item.ffzt}}</text>
                <text class="tableCellBox">{{item.fdjccrq}}</text>
                <text class="tableCellBox">{{item.gl}}</text>
            </view>
        </view>
    </scroll-view>
    <!-- 分页组件 -->
    <view>
        <pagination total="{{total}}" pageSize="{{pageSize}}" currentPage="{{currentPage}}" bind:pageChange="handlePageChange" bind:pageSizeChange="handlePageSizeChange">
        </pagination>
    </view>
</view>

js 文件

var app = getApp(); // 获取小程序应用实例
Page({
    data: {
        list: [], // 存储数据列表
        pageNum: 1, // 当前页码
        total: 0, // 数据总数
        pageSize: 10, // 每页显示条数
    },
    onLoad: function () {
        this.tableOn(); // 在页面加载时调用tableOn函数
    },
    tableOn() {
        let that = this; // 缓存this，以在回调函数中使用
        // 发起网络请求获取数据
        wx.request({
            url: app.API_URL + 'yourUrl', // 请求的URL
            data: {
                rows: {
                    pageNum: that.data.pageNum, // 当前页码
                    pageSize: that.data.pageSize, // 每页显示条数
                },
            },
            success: function (res) {
                that.setData({
                    list: res.data.list, // 更新数据列表
                    total: res.data.pagejx.areaNum, // 更新数据总数
                });
            },
        });
    },
    // 处理分页组件页码变化事件
    handlePageChange(event) {
        this.setData({
            pageNum: event.detail.page, // 更新当前页码
        });
        this.tableOn(); // 重新加载数据
    },
    // 处理分页组件每页显示条数变化事件
    handlePageSizeChange(event) {
        this.setData({
            pageNum: 1, // 重置页码为1
            pageSize: event.detail.pageSize, // 更新每页显示条数
        });
        this.tableOn(); // 重新加载数据
    },
});

相关推荐

⭐ 用vue封装分页器，让你的页面简单而不失优雅

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1201745.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

windows qos api使用示例

windows qos api使用示例

简介 本文给出C版以及Rust版调用windows API实现QOS的示例&#xff0c;并提出一些注意事项。QOS可以用来区分socket 优先级、实现带宽控制等诸多功能。 UDP版本 该示例的重要部分是客户端应用程序。客户端代码的工作方式如下&#xff1a; 1. 通过套接字连接到目标 IP 地址。…
阅读更多...
手把手教你数据流图如何画，轻松搞定！

手把手教你数据流图如何画，轻松搞定！

数据流图是一种强大的工具&#xff0c;用于可视化和分析系统中的数据流动和处理过程。它不仅能够帮助我们更好地理解系统的功能和流程&#xff0c;还能够帮助我们发现和解决潜在的问题。在本篇文章中&#xff0c;我们将手把手教你掌握数据流图。 一、数据流图的概念和构成元素 …
阅读更多...
合合信息亮相新加坡科技周——Big Data AI World Expo展示AI驱动文档数字化的前沿能力

合合信息亮相新加坡科技周——Big Data AI World Expo展示AI驱动文档数字化的前沿能力

展会规模背景&#xff1a; 2023年10月11日-12日&#xff0c;合合信息在TECH WEEK SINGAPORE&#xff08;新加坡科技周&#xff09;亮相&#xff0c;并在人工智能世界博览会&#xff08;Big Data & AI World&#xff09;展示合合信息核心人工智能文字识别技术能力。合合信息…
阅读更多...
cadence virtuoso 导出电路图

cadence virtuoso 导出电路图

去掉网格&#xff1a;option-display file-export image
阅读更多...
FPGA高端项目：图像采集+GTX+UDP架构，高速接口以太网视频传输，提供2套工程源码加QT上位机源码和技术支持

FPGA高端项目：图像采集+GTX+UDP架构，高速接口以太网视频传输，提供2套工程源码加QT上位机源码和技术支持

目录 1、前言免责声明本项目特点 2、相关方案推荐我这里已有的 GT 高速接口解决方案我这里已有的以太网方案 3、设计思路框架设计框图视频源选择OV5640摄像头配置及采集动态彩条视频数据组包GTX 全网最细解读GTX 基本结构GTX 发送和接收处理流程GTX 的参考时钟GTX 发送接口GTX …
阅读更多...
如何在电脑和手机设备上编辑只读 PDF

如何在电脑和手机设备上编辑只读 PDF

我们大多数人更喜欢以 PDF 格式共享和查看文件&#xff0c;因为它更专业、更便携。但是&#xff0c;通常情况下您被拒绝访问除查看之外的内容编辑、复制或评论。如果您希望更好地控制您的 PDF 或更灵活地编辑它&#xff0c;请弄清楚为什么您的 PDF 是只读的&#xff0c;然后使用…
阅读更多...
Final Cut Pro X for Mac：打造专业级视频剪辑的终极利器

Final Cut Pro X for Mac：打造专业级视频剪辑的终极利器

随着数字媒体技术的不断发展&#xff0c;视频剪辑已经成为各行各业不可或缺的一部分。Final Cut Pro X for Mac作为一款专业的视频剪辑软件&#xff0c;凭借其强大的功能和易用性&#xff0c;已经成为Mac用户的首选。本文将向您详细介绍Final Cut Pro X for Mac的优势、功能以及…
阅读更多...
思维导图软件 Xmind mac中文版软件特点

思维导图软件 Xmind mac中文版软件特点

XMind mac是一款思维导图软件&#xff0c;可以帮助用户创建各种类型的思维导图和概念图。 XMind mac软件特点 - 多样化的导图类型&#xff1a;XMind提供了多种类型的导图&#xff0c;如鱼骨图、树形图、机构图等&#xff0c;可以满足不同用户的需求。 - 强大的功能和工具&#…
阅读更多...
C++——const成员

C++——const成员

这里先用队列举例&#xff1a; #define _CRT_SECURE_NO_WARNINGS 1 #include <iostream> #include <assert.h> using namespace std; class SeqList { public:void pushBack(int data){if (_size _capacity){int* tmp (int*)realloc(a, sizeof(int) * 4);if (tm…
阅读更多...
Linux虚拟机的安装

Linux虚拟机的安装

文章目录 1. 准备虚拟机2. 安装所需软件3. 上传项目文件4. 配置项目环境5. 安装项目依赖6. 数据库设置7. 启动项目8. 测试项目9. 设置域名和DNS&#xff08;可选&#xff09;10. 定期维护11. 使用反向代理&#xff08;可选&#xff09;12. 安全性加固13. 使用容器化技术&#x…
阅读更多...
操作系统概念

操作系统概念

一、是什么 操作系统&#xff08;Operating System&#xff0c;缩写&#xff1a;OS&#xff09;是一组主管并控制计算机操作、运用和运行硬件、软件资源和提供公共服务来组织用户交互的相互关联的系统软件程序&#xff0c;同时也是计算机系统的内核与基石 简单来讲&#xff0…
阅读更多...
springboot rocketmq 延时消息、延迟消息

springboot rocketmq 延时消息、延迟消息

rocketmq也有延迟消息&#xff0c;经典的应用场景&#xff1a;订单30分钟未支付&#xff0c;则取消的场景 其他博客提到从rocketmq5.0开始&#xff0c;支持自定义延迟时间&#xff0c;4.x只支持预定义延迟时间&#xff0c;安装rocketmq可参考RocketMq简介及安装、docker安装ro…
阅读更多...
1.jvm基本知识

1.jvm基本知识

目录 概述jvm虚拟机三问jvm是什么&#xff1f;java 和 jvm 的关系 为什么学jvm怎么学习为什么jvm调优?什么时候jvm调优调优调什么 结束 概述 jvm虚拟机三问 jvm是什么&#xff1f; 广义上指的是一种规范&#xff0c;狭义上是 jdk 中的 jvm 虚拟机(实际上是各厂商实现的虚拟…
阅读更多...
PCBA表面污染的分类及处理方法

PCBA表面污染的分类及处理方法

NO.1 引言 在PCBA生产过程中&#xff0c;锡膏和助焊剂会产生残留物质&#xff0c;残留物中包含的有机酸和电离子&#xff0c;前者易腐蚀PCBA&#xff0c;后者会造成焊盘间短路故障。且近年来&#xff0c;用户对产品的清洁度要求越来越严格&#xff0c;PCBA清洗工艺逐渐被电子组…
阅读更多...
Rust图形界面：从零开始创建eGUi项目

Rust图形界面：从零开始创建eGUi项目

文章目录 创建组件show函数 egui系列&#xff1a;初步 创建 首先&#xff0c;用cargo创建一个新项目&#xff0c;并添加eframe cargo new hello cd hello cargo add eframe cargo run尽管默认创建的项目只实现了输出Hello world功能&#xff0c;但添加了eframe库&#xff0c…
阅读更多...
高频SQL50题（基础班）-4

高频SQL50题（基础班）-4

文章目录 主要内容一.SQL练习题1.1789-员工的直属部门代码如下&#xff08;示例&#xff09;: 2.610-判断三角形代码如下&#xff08;示例&#xff09;: 3.180-连续出现的数字代码如下&#xff08;示例&#xff09;: 4.1164-指定日期的产品价格代码如下&#xff08;示例&#x…
阅读更多...
Nginx：Windows详细安装部署教程

Nginx：Windows详细安装部署教程

一、Nginx简介 Nginx (engine x) 是一个高性能的HTTP和反向代理服务器&#xff0c;也是一个IMAP/POP3/SMTP服务器。Nginx是由伊戈尔赛索耶夫为俄罗斯访问量第二的Rambler.ru站点&#xff08;俄文&#xff1a;Рамблер&#xff09;开发的。 它也是一种轻量级的Web服务器…
阅读更多...
SQL 存储过程优化

SQL 存储过程优化

问题&#xff1a;一个复杂的6个表的left jion 语句&#xff0c;发现设置为定时任务后最高时长为18分钟 1、原因分析&#xff1a;对复杂SQL 进行拆分验证 发现是合同明细表和 产品表的left jion 时间过长&#xff0c;发现 合同明细表每天为3w条&#xff0c;之前做过优化 对每个…
阅读更多...
⑤ 【MySQL】DCL语句 —— 用户管理、权限控制

⑤ 【MySQL】DCL语句 —— 用户管理、权限控制

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ MySQL用户与权限 ⑤ 【MySQL】DCL语句 —— 用…
阅读更多...
mindspore mindcv图像分类算法；昇腾NPU加速使用；模型保存与加载

mindspore mindcv图像分类算法；昇腾NPU加速使用；模型保存与加载

参考&#xff1a; https://www.mindspore.cn/tutorials/en/r1.3/save_load_model.html https://github.com/mindspore-lab/mindcv/blob/main/docs/zh/tutorials/finetune.md 1、mindspore mindcv图像分类算法 import os from mindcv.utils.download import DownLoad import o…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023