mip-vd-tabs 用來支持網(wǎng)頁中標簽頁的顯示。標簽頁內(nèi)元素較多時不建議使用,會影響頁面性能.

示例

一共支持5種樣式

等分固定標簽頁

<mip-vd-tabs>
    <section>
        <li>第一頁</li>
        <li>第二頁</li>
        <li>第三頁</li>
        <li>第四頁</li>
    </section>
    <div>內(nèi)容1</div>
    <div>內(nèi)容2</div>
    <div>內(nèi)容3</div>
    <div>內(nèi)容4</div>
</mip-vd-tabs>

橫滑標簽頁

<mip-vd-tabs allow-scroll>
    <section>
        <li>第一季</li>
        <li>第二季</li>
        <li>第三季</li>
        <li>第四季</li>
        <li>第五季</li>
        <li>第六季更新至09</li>
    </section>
    <div>內(nèi)容1</div>
    <div>內(nèi)容2</div>
    <div>內(nèi)容3</div>
    <div>內(nèi)容4</div>
    <div>內(nèi)容5</div>
    <div>內(nèi)容6</div>
</mip-vd-tabs>

帶下拉按鈕的橫滑標簽頁

<mip-vd-tabs allow-scroll toggle-more toggle-label="自定義文字">
    <section>
        <li>第一季</li>
        <li>第二季</li>
        <li>第三季</li>
        <li>第四季更新至09</li>
    </section>
    <div>內(nèi)容1</div>
    <div>內(nèi)容2</div>
    <div>內(nèi)容3</div>
    <div>內(nèi)容4</div>
</mip-vd-tabs>

底部標簽頁

<mip-vd-tabs allow-scroll type="bottom" current="3">
    <div>內(nèi)容1</div>
    <div>內(nèi)容2</div>
    <div>內(nèi)容3</div>
    <div>內(nèi)容4</div>
    <section>
        <li>第一季</li>
        <li>第二季</li>
        <li>第三季</li>
        <li>第四季更新至09</li>
    </section>
</mip-vd-tabs>

劇情展開標簽頁

<mip-vd-tabs
    type="episode"
    toggle-more
    toggle-label="老九門劇情選集"
    allow-scroll
    total="23"
    current="11"
    text-tpl="看第{{x}}集"
    link-tpl="http://www.baidu.com/{{x}}/juji">
</mip-vd-tabs>

屬性

type

說明：一共有三種特型, bottom(底部選項卡), episode(劇情選項卡), 不填則為默認特型
必填項：否

allow-scroll

說明：允許滑動
必填項：否

toggle-more

說明：是否顯示下拉按鈕. 前置依賴于allow-scroll屬性
必填項：否

toggle-label

說明：下拉說明文字. 前置依賴于toggle-more屬性
必填項：否

current

說明：當(dāng)前已選標簽頁, 從0開始計數(shù)(current="3"表示第4個標簽頁). 當(dāng)type="episode"時,表示當(dāng)前劇集,從1開始計數(shù)(current="4"表示第4集),默認為1.
必填項：否

total

說明：劇集總數(shù). 前置依賴于type="episode",并且當(dāng)type="episode"為必填
必填項：否

page-size

說明：每頁顯示劇集數(shù). 前置依賴于type="episode",默認為50
必填項：否

text-tpl

說明：顯示在標簽頁上的劇集文案, "第{{x}}集"里的"{{x}}"將被替換成表示集數(shù)的數(shù)字. 前置依賴于type="episode".
必填項：否

link-tpl

說明：標簽頁和下拉菜單里的劇集跳轉(zhuǎn)鏈接, 鏈接里的"{{x}}"將被替換成表示集數(shù)的數(shù)字. 前置依賴于type="episode",當(dāng)type="episode"為必填.
必填項：否

head-title

說明：標簽頁和下拉菜單里的劇集跳轉(zhuǎn)新頁面的頭部標題. 前置依賴于type="episode",當(dāng)type="episode"為必填.
必填項：否