首页 > 其他分享 >前端分页组件简单好用列表分页page组件

前端分页组件简单好用列表分页page组件

时间:2023-05-26 21:22:57浏览次数:32  
标签:分页 .. 列表 requestData curPageNum 组件 page


快速实现 简单好用列表分页组件, 分页器组件,用于展示页码、请求数据等 ,包含翻页。 详情请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12576

效果图如下:

 


 

代码实现如下:

# 简单好用列表分页组件, 分页器组件,用于展示页码、请求数据等 ,包含翻页。

#### HTML代码部分

```html

<template>

<view class="content">

<!-- 1.推荐流贷产品”“推荐固贷产品”“推荐供应链产品”“推荐综合服务” -->

<div class="mui-content-padded">

<!-- 列表组件 -->

<CCBProjectList :productList="projectList" @click="goProDetail"></CCBProjectList>

</div>

<!--  totalNum: 条目总数量  pageCount:设置分页数量  curPageNum:设置当前页-->

<CCBPagingView :totalNum="totalNum" pageCount="10" :curPageNum="curPageNum" @pageClick="pageClick">

</CCBPagingView>

</view>

</template>

```

#### JS代码 (引入组件 填充数据)

```javascript

<script>

import CCBProjectList from '../../components/CCProjectList.vue';

import CCBPagingView from '../../components/CCPagingView.vue'

export default {

components: {

CCBProjectList,

CCBPagingView

},

data() {

return {

totalNum: 0,

curPageNum: 1,

// 列表数组

projectList: []

}

},

onLoad() {

this.requestData();

},

methods: {

// 列表条目点击事件

goProDetail(item) {

},

// 分页事件

pageClick(tag) {

if (tag === 0) {

// 上一页 (不等于第一页)

if (this.curPageNum > 1) {

this.curPageNum--;

this.requestData();

}

} else {

// 下一页 (不等于最后一页)

if (this.totalNum > (this.curPageNum * 10)) {

this.curPageNum++;

this.requestData();

}

}

},

requestData() {

// 模拟请求参数设置

let reqData = {

'area': '',

"pageSize": 10,

"pageNo": this.curPageNum

}

// 模拟请求接口

this.totalNum = 39;

this.projectList = [];

for (let i = 0; i < 10; i++) {

this.projectList.push({

'proName': '项目名称' + i,

'proUnit': '公司名称' + i,

'area': '广州',

'proType': '省级项目',

'stage': '已开工',

'id': i + ''

});

}

}

}

}

</script>

```

#### CSS

```CSS

<style>

page {

 

}

.content {

display: flex;

flex-direction: column;

}

.mui-content-padded {

margin: 0px 14px;

/* */

}

</style>

```

 

标签:分页,..,列表,requestData,curPageNum,组件,page
From: https://www.cnblogs.com/ccVue/p/17435849.html

相关文章

  • drf之restful规范中的过滤、排序和分页
    目录一、过滤内置过滤类第三方过滤类自定义过滤类价格再100----200之间的图书二、排序三、分页作业过滤和排序带分页一、过滤restful规范中-请求地址中带过滤条件带过滤的接口只有:查询所有内置过滤类fromrest_framework.filtersimportSearchFilterclassBookView(G......
  • drf——基于apiview写过滤、排序和分页
    基于APIView带过滤和排序fromrest_framework.viewsimportAPIViewfrom.modelsimportBookfrom.serializerimportBookSerializerfromrest_framework.responseimportResponseclassBookView(APIView):#/books/?ordering=-price&name=红楼梦defget(self,......
  • INFINI Labs 产品更新 | Console 新增数据比对、新增数据看板表格组件及支持下钻功能
    INFINILabs产品更新啦~,本次产品版本更新包括Gatewayv1.14.0、Consolev1.2.0、Easysearchv1.1.1等,其中Console在上一版基础上做了很多优化改进以及新增了一些特性,如新增数据比对校验功能、数据看板模块新增了表格组件、图表组件支持下钻功能等。欢迎下载体验。INFINIGat......
  • 基于Quartz的可视化UI操作组件GZY.Quartz.MUI更新说明(附:在ABP中集成GZY.Quartz.MUI
    前言时隔2年.(PS:其实陆陆续续在优化,不过没发博客)...本组件又迎来了新的更新...很久没更新博客了.生了娃,换了工作单位,太忙了..实在抱歉NETCore基于Quartz的UI可视化操作组件GZY.Quartz.MUI简介GitHub开源地址:l2999019/GZY.Quartz.MUI:基于Quartz的轻量级,注入化的U......
  • react子组件传值
    1.先在父组件定义函数准备接收来自子组件的数据2.此处为在父组件声明的函数3.子组件通过props.XXX(data)的方式传值 ......
  • kubernetes 组件介绍及安装
    准备主机昵称IP安装服务master192.168.100.10docker、kubelet-1.23.0kubeadm-1.23.0kubectl-1.23.0node192.168.100.20docker、kubelet-1.23.0kubeadm-1.23.0kubectl-1.23.0思路初始化虚拟机修改配置yum源安装docker(必须先安装docker,因为k8s是在do......
  • 下滑虚线组件封装
    <template><divclass="comment-wrapper"><spanclass="comment-text">{{props.text}}</span></div></template><scriptlang="ts"setup>constprops=defineProps({text:St......
  • vue3 组件传参
    父组件  子组件<iframe:src="props.src"width="100%"height="100%"frameborder="0"id="_iframe"></iframe>接收参数constprops=defineProps({src:{type:......
  • UML 基础: 组件图
    图的目的组件图的主要目的是显示系统组件间的结构关系。在UML1.1中,一个组件表现了实施项目,如文件和可运行的程序。不幸地,这与组件这个术语更为普遍的用法、指象COM组件这样的东西相冲突。随着时间的推移及UML的连续版本发布,UML组件已经失去了最初的绝大部分含义。UML2正式......
  • Vue3.3 的新功能的体验(下):泛型组件(Generic Component) 与 defineSlots
    上一篇说了DefineOptions、defineModel、Props的响应式解构和从外部导入类型这几个新功能,但是没有说Generic、defineSlots等,这是因为还没有完全搞清楚可以用在什么地方。折腾了几天终于弄清楚了。这还要从TS的泛型说起。泛型的目的和意义泛型仅仅只是表达传啥都行吗?当然......