Vue 实现翻页器下一页处理显示多页面要下一页非表格

vue里面因为数据太多要弄多个页面，路由又不行，element ui的分页器用不了

我的环境是electron-vue，和vue通用的可以无视，这里采用了element ui 的走马灯当做容器翻页

首先把你的渲染数据的数组等分，我这里分成了一个数组8条数据
方法如下

let index = 0while (index< this.screenList.length) {this.newArr.push(this.screenList.slice(index, index += 8))}console.log('数组', this.newArr)

this.screenList是数据，newArr为等分后的数据

分好了，在dom进行循环渲染

  <el-carousel trigger="click" height="46vw" :autoplay="false" :loop="false" arrow="always"><el-carousel-item v-for="(item, idx) in newArr" :key="idx"><el-card class="box-card screen-list" :style="{width: screenCaptureWidth+'px', height:screenCaptureHeight+60+'px'}" :body-style="{padding: 0, overflow:'hidden'}" shadow="hover" v-for="item in newArr[idx]" :key="item.sourceId" :label="item.sourceName":data="item.sourceId"><div   @click="onSelectScreenCapture(item.sourceId)"><p :title="item.sourceName" class="screen-show"><canvas :id="['screen_'+item.sourceId]"></canvas></p><p class="screen-button"><el-button style="width: 100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;" type="text"> {{item.sourceName}} </el-button></p></div></el-card></el-carousel-item></el-carousel>

效果如下
第一页

第二页，往后数据越多也能进行自动翻页

Vue 实现翻页器下一页处理显示多页面要下一页非表格相关推荐

小程序中scroll-view的下拉刷新和小程序页面的下拉刷新开启方法
scroll-view的下拉刷新 video.wxml中 <scroll-view class="videoScroll" scroll-y="true" ...
vue实现数字翻牌器组建，能够正常显示负数符号
先看一下效果图: 代码如下: 首先建立countFlop.vue文件,作为组建. <template><div class="count-flop" :key=& ...
js实现微信禁止h5网页下拉，禁止微信h5页面默认下拉
直接添加下面代码即可: document.body.addEventListener('touchmove', function (e) {e.preventDefault() }, { passiv ...
django-分页器
#######django-分页器######## 问题的引出:在模板页面渲染时,比如我们渲染的是书籍的一些信息,假如就只有10,20本书,完全可以渲染出来(意思的渲染出来,不会影响页面的美观),万一 ...
基于ESP32的蓝牙翻页器设计(论文附调试成功代码！！）
基于ESP32的蓝牙翻页器设计目录基于ESP32的蓝牙翻页器设计 1 摘要 1 1.绪论 2 1.1认识蓝牙 2 1.2研究思路 3 2.软硬件设计 3 2.1中央处理模块------ESP32 ...
前端Vue书籍翻页功能利用turn.js来完成以及知识点(源码)
目录下载文档开始构造方法可配置项方法语法事件两种方式添加事件自动翻页loading加载功能案例 CSS basic.css源码如下 JS里面代码太多了,直接官网下载 index. ...
使用jQuery封装翻页器
<div class="pagination"></div> (function($) {$.fn.pagination = function(option ...
avue中crud翻页器currentPage等修改数据，页面不同步问题
<avue-crud :option="option" ref="crud" //表格常用事件 @on-load="getList"/ ...
vue从其它页面返回_vue---详细页点返回列表页，停留在原先位置
列表页面,点击进入到详情页面,在详情页面向下滑动时,滚动条变化,document.documentElement.scrollTop变化,点击返回按钮时,列表页面的document.documentE ...

Vue 实现翻页器下一页处理显示多页面要下一页非表格

Vue 实现翻页器下一页处理显示多页面要下一页非表格相关推荐

最新文章

热门文章

Vue 实现翻页器 下一页 处理显示多页面要下一页非表格

Vue 实现翻页器 下一页 处理显示多页面要下一页非表格相关推荐

最新文章

热门文章

Vue 实现翻页器下一页处理显示多页面要下一页非表格

Vue 实现翻页器下一页处理显示多页面要下一页非表格相关推荐