113 lines
2.5 KiB
Vue
113 lines
2.5 KiB
Vue
<template>
|
|
<smart-tabs
|
|
:tabs="tabs"
|
|
:initial-index="current"
|
|
:scrollEnable="true"
|
|
:activeColor="'#19c324'"
|
|
@change="handleTabChange"
|
|
>
|
|
</smart-tabs>
|
|
<!-- 视频列表 -->
|
|
<view class="video-container">
|
|
<image-grid-simple
|
|
:imageList="list"
|
|
:columns="2"
|
|
:height="'80vh'"
|
|
@image-click="handlerClick"
|
|
>
|
|
|
|
<template #empty>
|
|
<view class="custom-empty">
|
|
<image src="/static/images/no-videos.png" />
|
|
<text>没有找到视频内容</text>
|
|
</view>
|
|
</template>
|
|
</image-grid-simple>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
current:0,
|
|
tabs:[],
|
|
list:[
|
|
{
|
|
|
|
"id":1,
|
|
"title":"1",
|
|
"src":"../../static/images/default.png"
|
|
},
|
|
{
|
|
"id":2,
|
|
"title":2,
|
|
"src":"../../static/images/default.png"
|
|
},
|
|
{
|
|
"id":3,
|
|
"title":3,
|
|
"src":"../../static/images/default.png"
|
|
},
|
|
{
|
|
"id":9,
|
|
"title":9,
|
|
"src":"../../static/images/default.png"
|
|
},
|
|
{
|
|
"id":4,
|
|
"title":4,
|
|
"src":"../../static/images/default.png"
|
|
},
|
|
{
|
|
"id":5,
|
|
"title":5,
|
|
"src":"../../static/images/default.png"
|
|
},
|
|
{
|
|
"id":6,
|
|
"title":6,
|
|
"src":"../../static/images/default.png"
|
|
},
|
|
{
|
|
"id":7,
|
|
"title":7,
|
|
"src":"../../static/images/default.png"
|
|
},
|
|
{
|
|
"id":8,
|
|
"title":8,
|
|
"src":"../../static/images/default.png"
|
|
}
|
|
]
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getCategory()
|
|
},
|
|
methods: {
|
|
getCategory() {
|
|
// 获取分类
|
|
this.tabs = [
|
|
{label:"拉布布",value:"labubu"},
|
|
{label:"科幻",value:"kh"},
|
|
{label:"酷炫汽车1",value:"car1"},
|
|
{label:"酷炫汽车2",value:"car2"},
|
|
{label:"酷炫汽车3",value:"car3"},
|
|
{label:"酷炫汽车4",value:"car4"},
|
|
{label:"酷炫汽车5",value:"car5"},
|
|
{label:"雏田",value:"ct"}
|
|
]
|
|
},
|
|
handleTabChange(idx) {
|
|
this.current = idx;
|
|
console.log(this.tabs[idx])
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style>
|