Vue实现简易翻页效果源码分享
程序员文章站
2022-06-05 14:34:55
源码如下：
sl...</div>
<div class="content">
<p>源码如下：</p>
<div class="jb51code">
<pre class="brush:js;">
<html>
<head> <meta charset="utf-8">
<title>slidepage</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.container {
width: 100%;
margin: 0 auto;
text-align: center;
}
.content{
font-size: 400px
}
.leftbtn{
width: 45px;
height: 45px;
margin-right: 15px;
}
.rightbtn{
width: 45px;
height: 45px;
margin-left: 15px;
}
</style>
</head>
<body>
<div id='root'>
<div v-if="numberarr.length == 0">{{showmessage}}</div>
<div class="container" v-for="(item, index) in getcurpagecontent(numberarr, curpage, itemnumperpage)" :key="index">
<div class="content">{{item}}</div>
<div class="pagebuttonlist">
<button class="leftbtn" @click="handleclick('leftbtn')"><</button>
<span class="pagination">{{curpage}}/{{totalpage}}</span>
<button class="rightbtn" @click="handleclick('rightbtn')">></button>
</div>
</div>
</div>
<script>
new vue({
el: "#root",
data(){
return {
showmessage: 'no number',
content:'',
numberarr: [1, 2, 3, 4],
curpage: 1,
totalpage: 1,
itemnumperpage: 1
}
},
mounted() {
this.init()
},
methods:{
init(){
this.totalpage = math.ceil(this.numberarr.length / this.itemnumperpage)
this.totalpage = this.totalpage < 1 ? 1 : this.totalpage
},
getcurpagecontent: function(numberarr, curpage, itemnumperpage){
return numberarr.filter(function(element, index){
if(index >= (curpage -1)* itemnumperpage && index < curpage *itemnumperpage){
return true
}else{
return false
}
})
},
handleclick: function(arg){
if(arg == 'leftbtn'){
this.curpage = this.curpage > 1 ? --this.curpage : this.totalpage
}else if (arg == 'rightbtn'){
this.curpage = this.curpage < this.totalpage ? ++this.curpage: 1
}
}
// handleleftclick: function(){
// if(this.curpage > 1){
// this.curpage --
// }else{
// this.curpage = this.totalpage
// }
// },
// handlerightclick: function(){
// if(this.curpage < this.totalpage){
// this.curpage ++
// }else{
// this.curpage = 1
// }
// }
}
})
</script>
</body>
</html></pre>
</div>
<p>效果如下所示，点击左右能切换页面：<br></p>
<p style="text-align: center"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"alt="Vue实现简易翻页效果源码分享" src="/default/index/img?u=aHR0cHM6Ly9maWxlcy5qYjUxLm5ldC9maWxlX2ltYWdlcy9hcnRpY2xlLzIwMTgxMS8yMDE4MTE4MTExMzMzMDY3LnBuZz8yMDE4MTA4MTExMzQ0" title="Vue实现简易翻页效果源码分享"></p>
<p><span style="color: #ff0000"><strong>总结</strong></span></p>
<p>以上所述是小编给大家介绍的vue实现简易翻页效果源码分享，希望对大家有所帮助
</p> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/1273973.html">
解决python os.mkdir创建目录失败的问题 </a>
</p>
<p>
下一篇： <a href="/article/1273975.html">
【代码笔记】Web-JavaScript-JavaScript注释 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2121591.html" target="_blank" title="基于Vue2实现简易的省市区县三级联动组件效果">
<h2>
基于Vue2实现简易的省市区县三级联动组件效果 </h2>
</a>
</li>
<li>
<a href="/article/2026775.html" target="_blank" title="Vue实现简易翻页效果源码分享">
<h2>
Vue实现简易翻页效果源码分享 </h2>
</a>
</li>
<li>
<a href="/article/1772939.html" target="_blank" title="vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】">
<h2>
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】 </h2>
</a>
</li>
<li>
<a href="/article/1706699.html" target="_blank" title="vue.js+mock.js+node.js实现移动端翻页效果">
<h2>
vue.js+mock.js+node.js实现移动端翻页效果 </h2>
</a>
</li>
<li>
<a href="/article/1665102.html" target="_blank" title="Vue 实现简易多行滚动"弹幕"效果">
<h2>
Vue 实现简易多行滚动"弹幕"效果 </h2>
</a>
</li>
<li>
<a href="/article/1573999.html" target="_blank" title="基于Vue2实现简易的省市区县三级联动组件效果">
<h2>
基于Vue2实现简易的省市区县三级联动组件效果 </h2>
</a>
</li>
<li>
<a href="/article/1350293.html" target="_blank" title="微信小程序实现滑动翻页效果源码附效果图">
<h2>
微信小程序实现滑动翻页效果源码附效果图 </h2>
</a>
</li>
<li>
<a href="/article/1317688.html" target="_blank" title="JavaScript中transform实现数字翻页效果的代码分享（图）">
<h2>
JavaScript中transform实现数字翻页效果的代码分享（图） </h2>
</a>
</li>
<li>
<a href="/article/1273974.html" target="_blank" title="Vue实现简易翻页效果源码分享">
<h2>
Vue实现简易翻页效果源码分享 </h2>
</a>
</li>
<li>
<a href="/article/1157191.html" target="_blank" title="vue router自动判断左右翻页转场动画效果的实现方法">
<h2>
vue router自动判断左右翻页转场动画效果的实现方法 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>