vue分页插件nuxt分页算法js支持url跳转分页和ajax参数分页
在vue或者nuxt的项目里可能会用到的分页插件.url分页效果是通过跳转url的形式来传递页面参数,或者url?page=1等的方法,下面是源码部分,别的需要的自行修改即可.AppPager.vue<template><ul class="app-pagination"><template v-if="type == ...
·
在vue或者nuxt的项目里可能会用到的分页插件.
url分页效果是通过跳转url的形式来传递页面参数,或者url?page=1等的方法,下面是源码部分,别的需要的自行修改即可.
AppPager.vue
<template>
<ul class="app-pagination">
<template v-if="url">
<li v-show="(current > Math.ceil(showItem / 2)) && (totalPage > showItem)">
<nuxt-link :to="`${url}${1}`">
首页
</nuxt-link>
</li>
<li v-show="current != 1" @click="current--">
<nuxt-link :to="`${url}${current - 1}`">
上一页
</nuxt-link>
</li>
<li v-for="index in pages" :key="index" :class="{'active':current == index}">
<nuxt-link :to="`${url}${index}`">
{{ index }}
</nuxt-link>
</li>
<li v-show="pageSize * current <= total " @click="current++">
<nuxt-link :to="`${url}${current + 1}`">
下一页
</nuxt-link>
</li>
<li v-show="(current < totalPage) && (totalPage > showItem)">
<nuxt-link :to="`${url}${totalPage}`">
尾页
</nuxt-link>
</li>
<li class="total">
<a href="javascript:void(0)">共 {{ total }} 条</a>
</li>
</template>
<template v-else>
<li @click="goto('start')">
<a href="javascript:void(0)">首页</a>
</li>
<li v-show="current != 1" @click="goto('prev')">
<a href="javascript:void(0)">上一页</a>
</li>
<li v-for="index in pages" :key="index" :class="{'active':current == index}" @click="goto(index)">
<a href="javascript:void(0)">{{ index }}</a>
</li>
<li v-show="totalPage != current && total != 0 && total != current" @click="goto('next')">
<a href="javascript:void(0)">下一页</a>
</li>
<li @click="goto('end')">
<a href="javascript:void(0)">末页</a>
</li>
<li class="total">
<a href="javascript:void(0)">共 {{ total }} 条</a>
</li>
</template>
</ul>
</template>
<script>
export default {
name: 'AppPager',
props: {
url: { //分页链接
required: false,
type: [String],
default: null
},
total: {
required: false,
type: [Number],
default: 0
},
page: {
required: false,
type: [Number, String],
default: 0
}
},
data() {
return {
current: 1,
showItem: 5,
pageSize: 8
};
},
computed: {
pages() {
let pag = [];
// 开始的数字
let left = 1;
// 结束的数字
const totalPage = this.totalPage;
let right = totalPage;
let middle = Math.ceil(this.showItem / 2);
if (totalPage >= this.showItem) {
// 中间的时候
// 左右都加上(middle-1)
if (this.current > middle && this.current < totalPage - (middle - 1)) {
left = this.current - (middle - 1);
right = this.current + (middle - 1);
} else {
//最左边或者在condition的中间
if (this.current <= middle) {
left = 1;
right = this.showItem;
// 最右边的情况
// 结束是总条数,开始是condition减去1
} else {
right = totalPage;
left = totalPage - (this.showItem - 1);
}
}
}
while (left <= right) {
pag.push(left);
left++;
}
//总页数
console.log(pag);
return pag;
},
/**
* 根据总条数计算总页数
*/
totalPage() {
return this.total % this.pageSize ? Math.floor(this.total / this.pageSize) + 1 : this.total / this.pageSize;
}
},
watch: {
page: {
handler(old, val) {
this.current = Number(old);
},
immediate: true
}
},
methods: {
goto(index) {
if (index == 'start') {
this.current = 1;
this.$emit('page', 1);
} else if (index == 'end') {
this.current = this.totalPage;
this.$emit('page', this.totalPage);
} else if (index == 'prev') {
this.current--;
this.$emit('page', this.current);
} else if (index == 'next') {
this.current++;
this.$emit('page', this.current);
} else {
this.$emit('page', index);
}
}
}
};
</script>
<style lang="less" scoped>
.app-pagination{
margin: 40px auto;
text-align: center;
li{
display: inline-block;
margin: 0 6px;
a{
padding: 8px;
display: inline-block;
color: #626262;
&:hover{
color: #FFB400;
}
}
&.active a{
color: #FFB400;
}
&.total a{
color: #FFB400;
}
}
}
</style>
使用方法 url类型分页:
<app-pager type="url" url="/tgdiary/" :total="diary.total" :page="1" />
使用方法 ajax 参数类型分页:
<app-pager type="ajax":total="diary.total" :page="1" @page="handlePageChange" />
methods: {
handlePageChange(page) {
console.log(page)
}
}
效果展示:
在线体验应用网址:舔狗日记
参考文章: https://www.cnblogs.com/moqiutao/p/6394681.html
修复了一个ajax类型分页的bug,优化代码.如果是url分页只需要传入url即可,如果url参数不存在就默认为ajax分页.触发分页事件.
更多推荐
已为社区贡献14条内容
所有评论(0)