今天写了类似视频选集的功能。需求看图:
只提供一个作品的个数,通过这个数字动态生成以20为间隔的选项卡标签;并且,点击标签,动态生成展示集数。
比如上面这个例子,给了集数参数值为143,生成了1-20、21-40等标签,点击标签,不同标签下展示的集数不同。
(样式的话,是刚开始折叠集数具体展示,等点击了,再展开)
1、用了ui框架,结构如下
<template>
<div class="comic_detail_num" ref="ref_detail_num">
<!-- 有几集选项卡 -->
<div class="num_top">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane ref="el_span" :label="calnumFirst(item)+'-'+calnumEnd(item)" v-for="item in wei" :key="item">
<!-- 选项卡里面东西 -->
<div class="num_click">
<ul>
<li v-for="(val,index) in numarr().slice((calnumFirst(item)-1),calnumEnd(item))" :key="index" @click="newRouterTo('/Contentcomic',{index:item})">{{val}}</li>
</ul>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
2、:label="calnumFirst(item)+'-'+calnumEnd(item)"
渲染的是选项卡标签里的东西;v-for="(val,index) in numarr().slice((calnumFirst(item)-1),calnumEnd(item))"
是渲染选项卡具体集数,通过slice截取数组的不同长度,显示不同的集数。
(numarr()这个是我把143这个数字从0~142都放了进一个数组里并返回这个数组,很笨的方法)
3、calnumFirst(item)
、calnumEnd(item)
这两个方法分别用来计算起始数字、终止数字,就比如说1~20,前者计算1,后者计算得到20.
4、两个变量 num
、wei
是在实例渲染完成后,通过获取的数据计算出来的。num代表总集数,wei是选项卡标签的数量。
完整代码如下:
<template>
<div class="comic_detail_num" ref="ref_detail_num">
<!-- 有几集选项卡 -->
<div class="num_top">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane ref="el_span" :label="calnumFirst(item)+'-'+calnumEnd(item)" v-for="item in wei" :key="item">
<!-- 选项卡里面东西 -->
<div class="num_click">
<ul>
<li v-for="(val,index) in numarr().slice((calnumFirst(item)-1),calnumEnd(item))" :key="index" @click="newRouterTo('/Contentcomic',{index:item})">
{{val}}</li>
</ul>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script>
export default {
data() {
return {
activeName: 'second',
wei: 0,
num: 0,
};
},
computed: {
introDetail() {
let arr = this.$store.state.comicStore.comicMainData.data.comicItems;
let param = this.$route.query.name;
let arrOk = '没有数据';
arr.forEach(item => {
if (item.name == param) arrOk = item;
});
return arrOk;//对象
},
},
mounted() {
this.num = this.introDetail.episodeNum;
this.wei = Math.ceil(this.num / 20);
},
methods: {
newRouterTo(routerPath, query) {
this.$router.push({ path: routerPath, query: query });
// this.$router.push({name: routerName, params: param});
},
handleClick(tab, event) {
this.$refs.ref_detail_num.style.height="3.06rem";
console.log(this.$refs.el_span)
},
calnumFirst(index) {
return ((index - 1) * 20 + 1);
},
calnumEnd(index) {
if (index === this.wei) {
return this.num;
} else {
return ((index - 1) * 20 + 20);
}
},
numarr(){
let arr=[];
for(let i=1;i<=this.num;i++){
arr.push(i);
}
return arr;
}
},
}
</script>
<style scoped>
.comic_detail_num {
padding-left: 0.15rem;
}
.comic_detail_num .num_top {
height: .4rem;
line-height: .4rem;
padding-right: .15rem;
}
.comic_detail_num .num_top span {
font-size: .14rem;
color: #FF5267;
margin-right: .175rem;
}
.comic_detail_num .num_click {
min-height: 2.42rem;
}
.comic_detail_num .num_click ul{
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.comic_detail_num .num_click li {
color: #5a5a5a;
border: .01rem solid #F9F9F9;
width: .6rem;
height: .53rem;
margin-bottom: .06rem;
background: #F9F9F9;
text-align: center;
line-height: .53rem;
font-size: .14rem;
}
</style>