当前位置:网站首页>html+vue.js 實現分頁可相容IE
html+vue.js 實現分頁可相容IE
2020-11-06 21:07:16 【itread01】
#### 當功能比較簡單,在單一html中使用vue.js分頁展示資料,並未安裝腳手架,或使用相關UI框架,此時需要手寫一個分頁器,不失為最合理最便捷的解決方案, 先看一下實現效果:  #### 上程式碼:
2.簡單搞一搞 HTML ```
1.簡單搞一搞 CSS,此處程式碼有摺疊
[v-cloak] {
display: none;
}
#app {
text-align: center;
padding-top: 300px;
height:500px;
}
.pageContainer {
width: 800px;
margin: 100px auto;
text-align: center;
font-size: 14px;
color: #A3A3A3;
}
.pageContainer ul.pagesInner {
height: 30px;
line-height: 30px;
display: inline-block;
padding: 0;
}
.pageContainer ul.pagesInner li {
width: 30px;
height: 30px;
display: inline-block;
border: 1px solid #E5E5E5;
margin: 0 5px;
list-style: none;
}
.pageContainer ul.pagesInner li.actived {
background: #FF6200;
color: #ffffff;
}
.pageContainer .page-size-box {
position: relative;
display: inline-block;
width: 70px;
border: 1px solid #E5E5E5;
height: 30px;
line-height: 30px;
}
.pageContainer ul.size-option {
display: inline-block;
border: 1px solid #E5E5E5;
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: -120px;
background: #ffffff;
}
.pageContainer ul.size-option li{
list-style: none;
width: 70px;
}
.pageContainer ul.size-option li:hover{
color: #FF6200;
}
.pageContainer form {
display: inline-block;
}
.pageContainer form input,
.pageContainer button {
outline: none;
padding: 0;
width: 46px;
height: 30px;
background: #ffffff;
border: 1px solid #E5E5E5;
color: #A3A3A3;
}
第{{pageIndex}}頁, 每頁顯示{{pageSize}}條
``` ## 3.搞事情啦 ~~~~ #### 首先分析一下分頁功能的實現思路: - 首頁和尾頁始終顯示, - 通過資料總條數dataListLength及每頁顯示條數pageSize,計算出總頁數pageTotalNum - 監聽watch一下,每頁顯示條數pageSize,重置當前頁碼pageIndex=1 - 我設計的分頁每次最多顯示5個頁碼(大家可根據需求自行調整),剩餘部分 ... 代替,並設定不可點選, - 根據不同的總頁數和當前頁碼的切換,頁籤展示形態有所不同,展示形態如下圖對應序號展示 > 1. 總頁數 <= 1,不顯示分頁器 > 2. 總頁數 <= 5 && 總頁數 > 1,顯示全部頁碼 > 3. 總頁數 > 5 && 當前頁面 <= 3 , 倒數第二個頁碼為...,頁碼從**左**往**右**計算 > 4. 總頁數 > 5 && 當前頁面 > 3 && 當前頁 < 總頁數 - 3 , 正倒數第二個頁碼都為..., 頁碼以當前頁碼計算,**±1** > 5. 總頁數 > 5 && 當前頁面 > 3 && 當前頁 > 總頁數 - 3 , 正數第二個頁碼為..., 頁碼從**右**往**左**計算  ```
```
共{{dataListLength}}條
- <
- {{item}}
- >
{{pageSize}}條/頁
跳至 頁 button @click="handleGoToPage">確定
- {{item}}條/頁
版权声明
本文为[itread01]所创,转载请带上原文链接,感谢
https://www.itread01.com/content/1604667722.html
边栏推荐
- C++ 数字、string和char*的转换
- C++学习——centos7上部署C++开发环境
- C++学习——一步步学会写Makefile
- C++学习——临时对象的产生与优化
- C++学习——对象的引用的用法
- C++编程经验(6):使用C++风格的类型转换
- Won the CKA + CKS certificate with the highest gold content in kubernetes in 31 days!
- C + + number, string and char * conversion
- C + + Learning -- capacity() and resize() in C + +
- C + + Learning -- about code performance optimization
猜你喜欢
-
C + + programming experience (6): using C + + style type conversion
-
Latest party and government work report ppt - Park ppt
-
在线身份证号码提取生日工具
-
Online ID number extraction birthday tool
-
️野指针?悬空指针?️ 一文带你搞懂!
-
Field pointer? Dangling pointer? This article will help you understand!
-
HCNA Routing&Switching之GVRP
-
GVRP of hcna Routing & Switching
-
Seq2Seq实现闲聊机器人
-
【闲聊机器人】seq2seq模型的原理
随机推荐
- LeetCode 91. 解码方法
- Seq2seq implements chat robot
- [chat robot] principle of seq2seq model
- Leetcode 91. Decoding method
- HCNA Routing&Switching之GVRP
- GVRP of hcna Routing & Switching
- HDU7016 Random Walk 2
- [Code+#1]Yazid 的新生舞会
- CF1548C The Three Little Pigs
- HDU7033 Typing Contest
- HDU7016 Random Walk 2
- [code + 1] Yazid's freshman ball
- CF1548C The Three Little Pigs
- HDU7033 Typing Contest
- Qt Creator 自动补齐变慢的解决
- HALCON 20.11:如何处理标定助手品质问题
- HALCON 20.11:标定助手使用注意事项
- Solution of QT creator's automatic replenishment slowing down
- Halcon 20.11: how to deal with the quality problem of calibration assistant
- Halcon 20.11: precautions for use of calibration assistant
- “十大科学技术问题”揭晓!|青年科学家50²论坛
- "Top ten scientific and technological issues" announced| Young scientists 50 ² forum
- 求反转链表
- Reverse linked list
- js的数据类型
- JS data type
- 记一次文件读写遇到的bug
- Remember the bug encountered in reading and writing a file
- 单例模式
- Singleton mode
- 在这个 N 多编程语言争霸的世界,C++ 究竟还有没有未来?
- In this world of N programming languages, is there a future for C + +?
- es6模板字符
- js Promise
- js 数组方法 回顾
- ES6 template characters
- js Promise
- JS array method review
- 【Golang】️走进 Go 语言️ 第一课 Hello World
- [golang] go into go language lesson 1 Hello World