vue后台获取数据量确定渲染轮播图的页量

轮播图每页展示6条数据，数据量不确定。轮播图页数要随着数据量的大小来确定

贴代码：

     <el-carousel trigger="click" :autoplay='false'><el-carousel-item v-for="item in Math.ceil(industryList.length / 6)" :key="item"><div class="whdja"><div class='leftpo'></div><div class="industry"><template v-for="(items,index) in industryList" ><div :key='items.industryId' v-if='(item-1)*5 <= index &&  index <= (item*5)'><div class="imgBox"><img v-lazy="items.industryImg" alt=""></div><div class='industryTitle'>{{items.company}}</div></div></template></div><div class='rigtpo'></div></div></el-carousel-item></el-carousel>

其中industryList为后台获取的数据
思路：

1. el-carousel-item页数使用循环 v-for=“item in Math.ceil(industryList.length / 6)” 一定要带上Math.ceil() 因为获得的值不一定是个正整数，此步骤确定了轮播图的页数有多少
1. 每页内数据industryList循环使用，但要加个判断**v-if=’(item-1)5 <= index && index <= (item5)’**此步骤确定每页渲染的数据，判断是重点

vue后台获取数据量确定渲染轮播图的页量相关推荐

Vue项目中获取数据后使用swiper轮播，无法轮播且 autoplay 和 loop 失效问题！
Vue项目中获取数据后使用swiper轮播,无法轮播且 autoplay 和 loop 失效问题! 问题表现:轮播组件显示第一张图,可拖动但无法切换到下一张图.但是F12控制台切换屏幕后能正常轮播但无 ...
ajax轮播图控件,基于json数据的jquery卡片轮播图插件
这是一款基于json数据的jquery卡片轮播图插件.该插件通过ajax来获取卡片的信息,动态显示卡片.它还提供不使用ajax的方式来获取数据,和其它一些api接口. 使用方法在页面中引入jquer ...
微信小程序 11 渲染轮播图和推荐歌曲
11.1 渲染轮播图 data 中声明一个 banners 属性,用来存储服务器端轮播图的数据. data: {banners:[] // 轮播图的数据},/*** 生命周期函数--监听页面加载* ...
JavaScript的案例（数据校验，js轮播图，页面定时弹窗）
1.数据校验步骤 1.确定事件(onsubmit)并绑定一个函数 2.书写这个函数,获取数据,并绑定id ...
banner 获取当前指示物_Android轮播图图片的本地保存及读取
一.轮播图控件及图片加载对于Android端的轮播图控件,我这边选用的是banner库 //轮播图 compile 'com.youth.banner:banner:1.4.9' //Glide c ...
html网易云音乐图片轮播效果,Vue之网易云音乐PC版轮播图的实现
Github - program-learning-lists 最近在刷网易云音乐歌单时发现首页的轮播图很有意思,正好自己想尝试做一个PC版的网易云音乐,于是就是使用Vue去做这个demo,废话少说, ...
Vue项目中使用swiper插件开发3d轮播图
在开发过程中有3D轮播图的需求,使用vue-awesome-swiper完成先贴个效果图安装npm install swiper@5.4.5 vue-awesome-swiper -S 全局引入并 ...
vue，uniapp带有导航栏的轮播图swiper组件，滑动的同时点击导航栏切换，使异步滑动过程中位置发生改变，不能正常展示的问题解决（这里用uiniapp的swiper组件）
<view v-show="totalListArr.length>1" class="comp-tabs&qu ...
vue骨架屏、时间选择器、轮播图。。你想要的这里全都有
骨架屏.时间选择器.轮播图..你想要的这里全都有,没有就补.补.补项目伊始,秉承能自己写就不用额外install的原则,提取了一些项目中时常要用到的公用组件.插件和样式,github地址:https ...

vue后台获取数据量确定渲染轮播图的页量

轮播图每页展示6条数据，数据量不确定。轮播图页数要随着数据量的大小来确定

vue后台获取数据量确定渲染轮播图的页量相关推荐

最新文章

热门文章