Vue分页器实现原理-创新互联
这期内容当中小编将会给大家带来有关Vue分页器实现原理，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
新闻组件template：
<template>
<div v-if="news">
<div v-for="(item, index) in newList" v-if="(index <= (newListPageIndex * 4)-1) && (index >= (newListPageIndex-1) * 4)" class="new-show-left">
<div class="new-img">
<img :src="item.img" alt=""/>
</div>
<div class="time">
<span>{{item.time}}</span>
</div>
<h2>{{item.title}}</h2>
<p>{{item.content}}</p>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import page from '@/components/page'
import bus from '@/eventBus/eventBus'
import {getNew} from '@/getData/getData'
export default{
components: {
page
},
data () {
return {
newList: '',
newList2: '',
newListLength: '',
newListPageIndex: '1', // 下标
next: false,
previous: false,
news: true,
title: ''
}
},
created () {
this.$nextTick(() => {
this._init_list1()
})
bus.$on('current-item', (ev) => {
this.$nextTick(() => {
this.currentItem(ev)
})
})
bus.$on('next-page', (ev) => {
this.$nextTick(() => {
this.nextPage(ev)
})
})
bus.$on('previous-page', (ev) => {
this.$nextTick(() => {
this.previousPage(ev)
})
})
},
methods: {
_init_list1 () {
getNew().then(res => {
this.newList = res.data.list1
let myObject = res.data.list1
this.newListLength = Object.keys(myObject).length
this.newListLength = Math.ceil((this.newListLength) / 6)
this.pageStyle()
})
},
pageStyle () {
if (this.newListPageIndex < this.newListLength) {
this.next = true
if (this.newListPageIndex > 1) {
this.previous = true
} else {
this.previous = false
}
} else {
this.next = false
if (this.newListPageIndex > 1) {
this.previous = true
} else {
this.previous = false
}
}
},
currentItem (ev) {
this.newListPageIndex = ev
window.scrollTo(0, 500)
this.pageStyle()
},
nextPage () {
if (this.newListPageIndex < this.newListLength) {
this.newListPageIndex ++
window.scrollTo(0, 500)
this.pageStyle()
}
},
previousPage () {
if (this.newListPageIndex > 1) {
this.newListPageIndex --
window.scrollTo(0, 500)
this.pageStyle()
}
}
}
}
</script>分页器组件template：
<template>
<ul class="page">
<li>
<img @click="previousPage" :src="[(previous==true ? 'static/images/leftGo-black.png' : 'static/images/leftGo.png')]">
<span @click="previousPage" :class="[(previous==true ? 'black-color' : 'gray-color')]">上一页</span>
</li>
<li >
<span @click="currentItem" v-for="(item, index) in listLength" :class="[(listPageIndex == index+1) ? 'gray-color':'black-color']">{{item}}</span>
</li>
<li>
<span @click="nextPage" :class="[(next == true ? 'black-color':'gray-color')]">下一页</span>
<img @click="nextPage" :src="[(next==true ? 'static/images/rightGo.png' : 'static/images/rightGo-gray.png')]">
</li>
</ul>
</template>
<script type="text/ecmascript-6">
import bus from '@/eventBus/eventBus'
export default{
props: {
listLength: '',
listPageIndex: '',
next: '',
previous: ''
},
created () {
// console.log(this.next)
},
methods: {
currentItem (ev) {
bus.$emit('current-item', ev.target.innerHTML)
},
nextPage (ev) {
bus.$emit('next-page', ev)
},
previousPage (ev) {
bus.$emit('previous-page', ev)
}
}
}
</script>一，首先自己写一个json文件（六条数据我就写两条吧，太长了），并在新闻组件里使用axios请求这个json文件：
{
"id": "1",
"title": "新闻一",
"time": "2017.10",
"content": "新闻一的简介...",
"imgSrc": "static/images/new1.png"
},
{
"id": "2",
"title": "新闻二",
"time": "2017.11",
"content": "新闻二的简介...",
"imgSrc": "static/images/new2.png"
},
...（总归六条数据省略四条不写）需求：每页显示四条新闻
原理：
1、请求接口数据，生成HTML页面（利用axios请求json文件，v-for循环将数据排版）
2、动态生成分页器页码（根据json数据长度）：
利用axios请求json文件，需要用到两个数据：一个是json这段新闻的长度newListLength，一个是这段数据的自身newtList，对数据长度的处理方法是：
this.newListLength = Math.ceil((this.newListLength) /4)
因为我们的json数据就写了六个，故这样计算得到的长度就是2（数据长度大于4处理得到的数据就是2，小于等于4得到的数值为1），以此类推，将这个数据传入分页器作为页码
在分页器page组件中利用pros接收父级传来的处理过后的长度，得到需要展示的分页器页码长度，再把此长度传到分页器组件，v-for循环生成页码
3、利用v-if实现页面任意展示某一段json的数据，比如我有6条数据，一页只需要展示4条
<div v-for="(item, index) in newList" v-if="(index <= (newListPageIndex * 4)-1) && (index >= (newListPageIndex-1) * 4)">
在新闻组件中令newListPageIndex的默认值是1，那么v-if=（0 =< index <= 3）初始展示第一页数据嘛
4、上面三步实现了几个功能，展示任意一段数据，分页器随json内取的这段数据动态生成页码。下面要做联动，分页器页码点击对应展示相应区域的json数据。
当前点击页码上的点击事件是currentItem，利用emit提交当前节点，获取页码数字，父组件emit提交当前节点，获取页码数字，父组件on接收这个页码数字。
令this.newListPageIndex = ev，这样就会引起v-if里面计算表达式的改变，如果是点击的1，那么v-if=”(index <= (newListPageIndex * 4)-1) && (index >= (newListPageIndex-1) * 4)”。计算结果是0=< index <=7，即展示json里下标为0到3的4条数据，类推，如果点击的是2，则展示下标为4=< index <=7的数据。
5、还差一点功能是上一页和下一页的点击事件，这个类似点击页码，不同的是点击页码传递的数据是当前页码数字，而点击上或下一页，是让父组件接收指令，因为当前的newListPageIndex受到分页器页码的控制，所以只需要操作newListPageIndex令其- -或者++即可，要注意的是第一页时肯定不能点上一页了，尾页不能点下一页，所以，newListPageIndex令其–（起码要大于1对吧,2-1=1最小退到第一页哈）或者++（要小于数据的总长度）要写在if语句里面
if (this.newListPageIndex < this.newListLength) {
this.newListPageIndex ++
}
if (this.equipmentListPageIndex > 1) {
this.newListPageIndex --
}6、最后就是页码与上页下页style颜色显示的问题，这里设置是处于当前页码状态时，当前页码处于是灰色不能点击，其它页码是黑色可点击。处于第一页时上一页灰色不可点击而下一页的样式反之，处于末页下一页灰色不可点击而上一页的样式反之
处理思路是，利用三元表达式来判断。当页码通过v-for遍历，因为当前展示区域控制数据的是newListPageIndex（起始加载默认为1），这时只要让页码下标index+1（因为下标从零开始，而长度从1开始）与newListPageIndex相等的那个页码块为灰色不可点击而其它的页码为黑色可点击即可。计算思路如下：
v-for="(item, index) in newListLength" :key="index" :class="[(newListPageIndex == index+1) ? 'gray-color':'black-color']"
上述就是小编为大家分享的Vue分页器实现原理了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
当前名称：Vue分页器实现原理-创新互联
地址分享：https://www.cdcxhl.com/article44/dpodee.html
成都网站建设公司_创新互联，为您提供动态网站、企业建站、搜索引擎优化、电子商务、网站改版、自适应网站
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联
- SEO人员将如何规避网站改版不当的后果？ 2022-07-04
- 公司建设网站-公司怎样进行网站改版？ 2016-11-10
- 网站改版方案首要考虑的5个因素 2013-07-09
- 网站改版的常见误区与设计技巧 2017-03-06
- 网站改版重新制作的时候需要注意哪些和事项呢？ 2016-11-12
- 网站改版哪些问题需考虑？ 2020-12-22
- 浅谈傲川科技网站改版的见解 2023-02-12
- 网站改版提升关键字排名 2017-02-12
- 企业网站改版升级要不要换网站建设公司主要看这些地方去决定 2022-05-17
- 网站改版要考虑哪些问题？ 2020-12-03
- 网站开发中关于网站改版需要注意什么呢， 2016-10-27
- 创新互联让您的网站改版效果一直好下去 2022-06-06