vue分页 点击(非下拉)
1.主页面
<template>
<div class="list">
<template v-if="count">
555555
<ul>
<li v-for="item in items">{{item}}</li>
</ul>
<mo-paging
:page-index="currentPage"
:total="count"
:page-size="pageSize"
@change="pageChange">
</mo-paging>
</template>
</div>
</template>
<script>
import MoPaging from './pages'
export default {
//显示的声明组件
components : {
MoPaging
},
data () {
return {
pageSize : 3 , //每页显示20条数据
currentPage : 1, //当前页码
count : 0, //总记录数
items : []
}
},
methods : {
//获取数据
getList () {
var _this=this
//模拟
let url = `http://127.0.0.1/ceshi/list.php?pageSize=${this.pageSize}¤tPage=${this.currentPage}`
$.ajax({
type: "post",
url:url,
data:{aa:1},
datatype:'json',
error: function(request) {
alert("Connection err是是是or");
},
success: function(body) {
body=JSON.parse(body);
console.log(body.count)
_this.count = body.count
console.log(body)
_this.items = body.list
}
}); }, //从page组件传递过来的当前page
pageChange (page) {
this.currentPage = page
this.getList()
}
},
mounted() {
//请求第一页数据
this.getList()
}
}
</script>
2,插件文件(包含的pages.js文件)
<script>
export default {
name : 'MoPaging',
//通过props来接受从父组件传递过来的值
props : { //页面中的可见页码,其他的以...替代, 必须是奇数
perPages : {
type : Number,
default : 5
}, //当前页码
pageIndex : {
type : Number,
default : 1
}, //每页显示条数
pageSize : {
type : Number,
default : 10
}, //总记录数
total : {
type : Number,
default : 1
}, },
methods : {
prev(){
if (this.index > 1) {
this.go(this.index - 1)
}
},
next(){
if (this.index < this.pages) {
this.go(this.index + 1)
}
},
first(){
if (this.index !== 1) {
this.go(1)
}
},
last(){
if (this.index != this.pages) {
this.go(this.pages)
}
},
go (page) {
if (this.index !== page) {
this.index = page
//父组件通过change方法来接受当前的页码
this.$emit('change', this.index)
}
}
},
computed : { //计算总页码
pages(){
return Math.ceil(this.size / this.limit)
}, //计算页码,当count等变化时自动计算
pagers () {
const array = []
const perPages = this.perPages
const pageCount = this.pages
let current = this.index
const _offset = (perPages - 1) / 2 const offset = {
start : current - _offset,
end : current + _offset
} //-1, 3
if (offset.start < 1) {
offset.end = offset.end + (1 - offset.start)
offset.start = 1
}
if (offset.end > pageCount) {
offset.start = offset.start - (offset.end - pageCount)
offset.end = pageCount
}
if (offset.start < 1) offset.start = 1 this.showPrevMore = (offset.start > 1)
this.showNextMore = (offset.end < pageCount) for (let i = offset.start; i <= offset.end; i++) {
array.push(i)
} return array
}
},
data () {
return {
index : this.pageIndex, //当前页码
limit : this.pageSize, //每页显示条数
size : this.total || 1, //总记录数
showPrevMore : false,
showNextMore : false
}
},
watch : {
pageIndex(val) {
this.index = val || 1
},
pageSize(val) {
this.limit = val || 10
},
total(val) {
this.size = val || 1
}
}
}
</script>
<template>
<ul class="mo-paging">
<!-- prev -->
<li
:class="['paging-item', 'paging-item--prev', {'paging-item--disabled' : index === 1}]"
@click="prev">prev</li> <!-- first -->
<li
:class="['paging-item', 'paging-item--first', {'paging-item--disabled' : index === 1}]"
@click="first">first</li> <li
:class="['paging-item', 'paging-item--more']"
v-if="showPrevMore">...</li> <li
:class="['paging-item', {'paging-item--current' : index === pager}]"
v-for="pager in pagers"
@click="go(pager)">{{ pager }}</li> <li
:class="['paging-item', 'paging-item--more']"
v-if="showNextMore">...</li> <!-- last -->
<li
:class="['paging-item', 'paging-item--last', {'paging-item--disabled' : index === pages}]"
@click="last">last</li> <!-- next -->
<li
:class="['paging-item', 'paging-item--next', {'paging-item--disabled' : index === pages}]"
@click="next">next</li>
</ul>
</template> <style>
.mo-paging {
display: inline-block;
padding: 0;
margin: 1rem 0;
font-size: 0;
list-style: none;
user-select: none;
> .paging-item {
display: inline;
font-size: 14px;
position: relative;
padding: 6px 12px;
line-height: 1.42857143;
text-decoration: none;
border: 1px solid #ccc;
background-color: #fff;
margin-left: -1px;
cursor: pointer;
color: #0275d8;
&:first-child {
margin-left: 0;
}
&:hover {
background-color: #f0f0f0;
color: #0275d8;
}
&.paging-item--disabled,
&.paging-item--more{
background-color: #fff;
color: #505050;
}
//禁用
&.paging-item--disabled {
cursor: not-allowed;
opacity: .75;
}
&.paging-item--more,
&.paging-item--current {
cursor: default;
}
//选中
&.paging-item--current {
background-color: #0275d8;
color:#fff;
position: relative;
z-index: 1;
border-color: #0275d8;
}
}
}
</style>
vue分页 点击(非下拉)的更多相关文章
- iOS 点击cell下拉
iOS 点击cell下拉 代码如下: #import "ViewController.h" @interface ViewController ()<UITableView ...
- Android 自定义ListView实现底部分页刷新与顶部下拉刷新,androidlistview
在项目开发中,由于数据过大时,需要进行分页加载或下拉刷新,来缓解一次性加载的过长等待.本篇博文实例讲解通过自定义的ListView实现底部分页加载和顶部下拉刷新的效果. 其效果图: 一.ListVie ...
- js (单个的)点击式下拉菜单
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Vue.js组件之联动下拉框
Html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 点击select下拉框获取option的属性值
select下拉框作为前端开发者应该是经常使用的,最近在项目中遇到这样的情况,点击下拉框选项,需要获取所点击的option的属性值,当时想很简单啊,给option加一个点击事件不就行了,然后就加了一下 ...
- 用vue写一个仿app下拉刷新的组件
如果你用vue弄移动端的页面,那么下拉刷新还是比较常见的场景,下面来研究如何写一个下拉刷新的组件(先上图); 由于节省大家的时间,样式就不贴出来了. html结构也不必介绍了,直接看代码吧-.- &l ...
- 将select的默认小三角替换成别的图片,且实现点击图片出现下拉框选择option
最近做项目,要求修改select下拉框的默认三角样式,因为它在不同浏览器的样式不同且有点丑,找找网上也没什么详细修改方法,我就总结一下自己的吧. 目标是做成下图效果: 图一:将默认小三角换成红圈的三角 ...
- 点击select下拉框,触发事件
<div class="controls moneycheck floatleft"> <select class="span12 chosen_cat ...
- js 导航栏多项点击显示下拉菜单代码
<!DOCTYPE html> <html> <head> <title>Dropdown</title> <!--<link ...
- vue开发 element的select下拉框设定初值后,不能重新选择的问题
问题描述: 用的element的select可多选的下拉选框,在回显后有初始值的情况下,不能修改,也不能再选择 如图,明明点击了一般内勤主管,但没有任何反应 <el-select v-model ...
随机推荐
- 第一类对象-> 函数名 -> 变量名
函数对象对象可以像变量一样进行赋值 还可以作为列表的元素进行使用 可以作为返回值返回 可以作为参数进行传递 # def fn(): # print("我叫fn") # fn() # ...
- leetCode 557. Reverse Words in a String I
Input: "Let's take LeetCode contest" Output: "s'teL ekat edoCteeL tsetnoc" 解:输入一 ...
- Python下的opencv小问题大智慧
1.今晚日了狗了,图像显示不按照预期出现,然后突然就好了...... 2.根据第一个问题举一个例子,另一个我没保存... 是不是分不清楚???? plt.imshow(wjy2, cmap='gr ...
- jvm 内存分配 (转)
深入理解JVM—JVM内存模型 http://www.cnblogs.com/dingyingsi/p/3760447.html 我们知道,计算机CPU和内存的交互是最频繁的,内存是我们的高速缓存区 ...
- Java-左移右移-jdk8
移位有三种 << 左移,左边补0 >> 右移,正数左边补0,负数补1 >>> 右移, 正数,负数统一左边补0 来看几个奇葩的代码 public static ...
- 6.简单提取小红书app数据(简单初步试采集与分析)-1
采集小红书数据爬虫:1.本来是要通过app端的接口去直接采集数据,但是app接口手机端设置本地代理这边开启抓包后就不能正常访问数据.所以就采用了微信小程序里的小红书app接口去采集数据. 2.通过 f ...
- C++学习基础十三——struct和class的区别
来自:http://blog.sina.com.cn/s/blog_48f587a80100k630.html C++中的struct是对C中struct进行了扩展,它不单是一个包含不同数据类型的数据 ...
- Duboo 与springboot整合
https://github.com/apache/incubator-dubbo-spring-boot-project 当采用properties方式时,可以用下方的注解 1.pom <de ...
- 用代码检查Windows程序的位数
方法就是通过读取程序文件的头部来判断,具体代码如下: #include <stdio.h> #include <windows.h> int CrnGetImageFileMa ...
- web安全/渗透测试--1--web安全原则
web 安全: https://blog.csdn.net/wutianxu123/article/category/8037453/2 web安全原则 安全应该是系统开发之初就考虑的问题.换句话说 ...