mip-vd-tabs tab切換組件
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"為必填.
必填項:否