72 lines
1.6 KiB
Vue
72 lines
1.6 KiB
Vue
<template>
|
|
<smart-tabs
|
|
:tabs="tabs"
|
|
:initial-index="current"
|
|
:scrollEnable="true"
|
|
:activeColor="'#19c324'"
|
|
@change="handleTabChange"
|
|
>
|
|
</smart-tabs>
|
|
<!-- 视频列表 -->
|
|
<view class="video-container">
|
|
<view class="video-grid">
|
|
<view
|
|
v-for="(video, index) in list"
|
|
:key="index"
|
|
class="video-item"
|
|
>
|
|
<view class="video-card">
|
|
<video
|
|
:src="video.url"
|
|
:poster="video.poster"
|
|
class="video-player"
|
|
:controls="false"
|
|
:show-center-play-btn="true"
|
|
:autoplay="true"
|
|
:loop="true"
|
|
@play="handlePlay(index)"
|
|
></video>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
current:0,
|
|
tabs:[]
|
|
}
|
|
},
|
|
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>
|