TvTabs 标签 TV
该方法或组件支持轻应用调用

用于让用户在不同的视图中进行切换。

引入方式

数字生活小程序工程-TV模板，不需要 import，直接使用组件标签即可。

import { TvTabs, TvTabsPane } from '@21cnfe/tv-vui'
Vue.component('TvTabs', TvTabs)  
Vue.component('TvTabsPane', TvTabsPane)

代码演示

<div class="container">
    <tv-tabs @Change="changeTab" ref="topTabs">
        <tv-tabsPane
                :name="tabItem.title"
                :scrollInChunk="true"
                @reachBottom="loadMoreData"
                v-for="(tabItem, i) in topTabs"
                class="card-list"
                :key="i">
            <div class="photoList">
                <tv-card class="photo-item" v-for="(photoItem, j) in tabItem.list" :key="j">
                    <img :src="photoItem.src" alt="">
                </tv-card>
            </div>
        </tv-tabsPane>
    </tv-tabs>
</div>

API（TvTabsPane）

属性	说明	类型	默认值
`scrollInChunk`	焦点移动时，默认是整个网页滚动，有时候需要在区块内滚动时，设置此属性	Boolean	false

Events（TvTabs）

事件名称	说明	回调参数
`onChange`	tab 发生改变时的回调	{data: item, index: index}
`onTabClick`	tab 被点击的回调	{data: item, index: index}

1. TvTabs 标签 TV 该方法或组件支持轻应用调用

TvTabs 标签 TV 该方法或组件支持轻应用调用

引入方式

代码演示

API（TvTabsPane）

Events（TvTabs）

TvTabs 标签 TV
该方法或组件支持轻应用调用