宝哥软件园

Vue实现简易翻页效果源码分享

编辑:宝哥软件园 来源:互联网 时间:2021-08-28

源码如下:

html head meta charset=' UTF-8 '标题幻灯片页/标题脚本src=' http :https://cdn。jsdeliver。net/NPM/[电子邮件保护]/dist/vue。js '/脚本样式类型=' text/CSS ' * { margin 3360 0;padd : 0;} .容器{宽度: 100%;margin: 0自动文本对齐:中心;} .内容{ font-size: 400px } .leftBtn { width: 45px高度: 45px右边距: 15px} .rightBtn { width: 45px高度: 45px左边距left : 15px }/style/headdydiv id=' root ' div v-if=' NumberArr。length==0 " { show message } }/div class=' container ' v-for='(项目,索引)在getCurPageContent(numberArr,curPage,itenmperpage)' : key=' index ' div class=' content ' { item } }/div class=' page button list ' button class=' left BTN ' @ click=' handleClick(' left BTN ')'/button span class='分页' 1 : this.totalPage },getCurPageContent:函数(numberArr,curPage,itenmperpage){返回数字Arr。过滤器(函数(元素,索引){ if(index=(cur page-1)* itenmperpage index cur page * itenmperpage){ return true } else { return false } },handleClick:函数(arg){ if(arg='左BTN '){ this。cur page=这个。第一页?这个。CurPage :这个。total page } else if(arg==' right Btn '){ this。CurPage=这个。CurPage这个。TotalPage?这个。cur page : { 1 } }//handleleftclick :函数(){//if(this。cur page 1){//这个。curpage-//} else {//this。curpage=这个。totalpage/}/},//handleRightClick:函数(){//if(this。卷曲这个。totalpage){//this。curpage//} else {//this。cur page=1/}/} })/脚本/正文/html效果如下所示,点击左右能切换页面:

总结

以上所述是小编给大家介绍的某视频剪辑软件实现简易翻页效果源码分享,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

更多资讯
游戏推荐
更多+