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

前言

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

实现效果

在这里插入图片描述

封装公共方法

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封装分页器，让你的页面简单而不失优雅

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Windows如何正确设置PHP环境变量以在Git Bash中运行命令

Windows如何正确设置PHP环境变量以在Git Bash中运行命令

1、随便找一个目录&#xff0c;鼠标右键打开git bash here 2、cd的根目录 3、找到php安装目录 4、 在根目录下打开 vim .bash_profile &#xff0c;添加环境变量&#xff0c;php地址根据自己的本地地址而定 PATH$PATH:/d/phpstudy_pro/Extensions/php/php7.3.4nts 添加后保存…
阅读更多...
计算机网络期末复习-Part5

计算机网络期末复习-Part5

1、CRC计算 看例题&#xff1a;待发送序列为101110&#xff0c;生成多项式为X31&#xff0c;计算CRC校验码 先在待发送序列末尾添加与生成多项式次数相同的零&#xff0c;在上述例子中&#xff0c;生成多项式是X^3 1&#xff0c;所以需要添加3个零&#xff0c;待发送序列变成…
阅读更多...
使用JAVA pdf转word

使用JAVA pdf转word

使用spire.pdf 非常简单。 查看 https://mvnrepository.com/artifact/e-iceblue/spire.pdf 注意&#xff0c;这个包在 e-iceblue 下。 下面开始撸代码 先来pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://mav…
阅读更多...
设置VS编译选项使程序不需要带DLL在任意Windows系统上正常运行

设置VS编译选项使程序不需要带DLL在任意Windows系统上正常运行

针对VS上编译控制台程序和DLL程序的编译设置 之所以把控制台和DLL程序的编译设置放在一起&#xff0c;是因为它们的设置都已一样的。现在&#xff0c;我们以VS2013开发环境为例&#xff0c;想大家描述一下操作步骤。 在打开项目工程之后&#xff0c;右击项目工程&#xff0c;选…
阅读更多...
数据运营基础：用户场景营销

数据运营基础：用户场景营销

一、概述 场景营销模型是顶层模型&#xff0c;是站在用户经营和用户场景角度来制定经营策略的模型。本质上&#xff0c;场景营销模型是在用户使用产品的每个细分场景中通过分析用户需求整合功能、实体和体验等为用户提供服务的模型。 二、场景的起源和特点 数据运营体系在发展…
阅读更多...
页面的动静分离

页面的动静分离

动静分离&#xff1a; 访问静态和动态页面分开 实现动态和静态页面负载均衡 实验1&#xff1a; 准备三台虚拟机&#xff1a; 1台nginx代理服务器&#xff1a; 192.168.120.30 2台tomcat&#xff1a; tomcat1&#xff1a;192.168.120.20 tomcat2&#xff1a;192.168.12…
阅读更多...
【C++】日期类实现，与日期计算相关OJ题

【C++】日期类实现，与日期计算相关OJ题

文章目录 日期类的设计日期计算相关OJ题HJ73 计算日期到天数转换KY111 日期差值KY222 打印日期KY258 日期累加 在软件开发中&#xff0c;处理日期是一项常见的任务。为了方便地操作日期&#xff0c;我们可以使用C编程语言来创建一个简单的日期类。在本文中&#xff0c;我们将介…
阅读更多...
027 - STM32学习笔记 - ADC初识（一）

027 - STM32学习笔记 - ADC初识（一）

026- STM32学习笔记 - ADC初识&#xff08;一&#xff09; 前几天不小心把板子掉地上了&#xff0c;液晶屏摔坏了&#xff0c;暂时先停一下液晶屏的学习&#xff0c;等新的板子来了再继续学习。 一、ADC介绍 ADC指的是Analog to Digital Converter&#xff08;模数转换器&…
阅读更多...
​2005/2008-2022逐年道路网分布数据

​2005/2008-2022逐年道路网分布数据

道路网&#xff08;road network&#xff09;指的是在一定区域内&#xff0c;由各种道路组成的相互联络、交织成网状分布的道路系统。全部由各级公路组成的称公路网。在城市范围内由各种道路组成的称城市道路网。 城市道路网由城镇管辖范围内的各种不同功能的干道和区域…
阅读更多...
vmware 修改主机名称 hadoop 服务器环境配置(一)

vmware 修改主机名称 hadoop 服务器环境配置(一)

如何在虚拟机配置主机名称&#xff1a; 1. 如图所示在/etc 文件夹下有个hosts文件。追加映射关系&#xff1a; #关系 ip地址 名称 192.168.164.20 hadoop20 2. 保存后&#xff0c;重启reboot即可
阅读更多...
GoldWave 6.78中文免费激活版功能特色2024最新功能解析

GoldWave 6.78中文免费激活版功能特色2024最新功能解析

GoldWave 6.78中文免费激活版是一款多功能、强大且用户友好的音频编辑工具。它为音乐制作人、播客主持人以及音频编辑爱好者提供了全面的编辑功能&#xff0c;让你能够创造出高质量的音频作品。无论你是在音乐制作、音频修复还是播客制作&#xff0c;GoldWave 都是一个值得一试…
阅读更多...
第1关：构造函数与析构函数的实现

第1关：构造函数与析构函数的实现

题目&#xff1a;根据.h写出.cpp 考点&#xff1a; 1.链表的默认构造&#xff0c; 拷贝构造&#xff0c;传参构造以及析构函数等。 代码&#xff1a; /********** BEGIN **********/ #include <cstdlib> #include <cstring> #include "LinkedList.h&…
阅读更多...
卷积神经网络(1)

卷积神经网络(1)

目录 卷积 1 自定义二维卷积算子 2 自定义带步长和零填充的二维卷积算子 3 实现图像边缘检测 4 自定义卷积层算子和汇聚层算子 4.1 卷积算子 4.2 汇聚层算子 5 学习torch.nn.Conv2d()、torch.nn.MaxPool2d()&#xff1b;torch.nn.avg_pool2d()&#xff0c;简要介绍使用方…
阅读更多...
服务器常见问题排查（一）—cpu占用高、上下文频繁切换、频繁GC

服务器常见问题排查（一）—cpu占用高、上下文频繁切换、频繁GC

一般而言cpu异常往往还是比较好定位的。原因包括业务逻辑问题(死循环)、频繁gc以及上下文切换过多。而最常见的往往是业务逻辑(或者框架逻辑)导致的&#xff0c;可以使用jstack来分析对应的堆栈情况。 使用jstack排查占用率问题 当使用jstack排查占用率问题时&#xff0c;可以…
阅读更多...
如何下载全国水系、铁路、土地、交通设施和运输相关数据？

如何下载全国水系、铁路、土地、交通设施和运输相关数据？

​ 通过以下方法可以将全国水系、铁路、土地、交通设施和运输相关数据下载到本机。 方法/步骤 下载GIS地图下载器 http://www.geosaas.com/download/mapdownloader.exe&#xff0c;安装完成后桌面上出现”GIS地图下载器“图标。 2、双击桌面图标打开”GI…
阅读更多...
11-13 spring整合web

11-13 spring整合web

spring注解 把properties文件中的key注入到属性当中去 xml配置文件拆分 -> import标签 注解开发中 import 实现 搞一个主配置类&#xff0c;其他配置类全部导入进来这个这个主配置类 而且其他配置类不需要 加上configuration注解 之前这个注解用于表示这是一个配置文件 …
阅读更多...
【论文精读】Pose-Free Neural Radiance Fields via Implicit Pose Regularization

【论文精读】Pose-Free Neural Radiance Fields via Implicit Pose Regularization

今天读的是一篇发表在ICCV 2023上的文章&#xff0c;作者来自NTU。 文章地址&#xff1a;点击前往 文章目录 Abstract1 Intro2 Related Work3 Preliminary4 Proposed Method4.1 Overall Framework4.2 Scene Codebook Construction4.3 Pose-Guided View Reconstruction4.4 Train…
阅读更多...
Windows 微PE WePE_64_V2.3 PE模式下启用账号和修改密码

Windows 微PE WePE_64_V2.3 PE模式下启用账号和修改密码

启动PE后&#xff0c;进入桌面打开运行dism程序 选择带有系统的盘符&#xff08;默认选的是PE盘&#xff09;&#xff0c;然后打开会话 选择左侧工具箱&#xff0c;然后右侧找到账户管理 然后就可以对已有账号进行管理了 结束。
阅读更多...
【python自动化】Playwright基础教程(四)事件操作①高亮元素匹配器鼠标悬停

【python自动化】Playwright基础教程(四)事件操作①高亮元素匹配器鼠标悬停

本文目录 文章目录 前言高亮显示元素定位 - highlighthighlight实战highlight定位多个元素 元素匹配器 - nthnth实战演示 元素匹配 - first&last 综合定位方式时间操作进行实战&#xff0c;巩固之前我们学习的定位方式。 这一部分内容对应官网 : https://playwright.dev/py…
阅读更多...
Java SE 封装、包、static关键字和代码块

Java SE 封装、包、static关键字和代码块

1.封装 1.1封装的概念 面向对象程序三大特性&#xff1a;封装、继承、多态。而类和对象阶段&#xff0c;主要研究的就是封装特性。何为封装呢&#xff1f;简单来说 就是套壳屏蔽细节。 封装&#xff1a;将数据和操作数据的方法进行有机结合&#xff0c;隐藏对象的属性和实现细…
阅读更多...
最新文章

Copyright @ 2022~2023