demo 原始链接:https://vux.li/demos/v2/#/component/tab
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <tab>\n <tab-item selected @on-item-click=\"onItemClick\">已发货</tab-item>\n <tab-item @on-item-click=\"onItemClick\">未发货</tab-item>\n <tab-item @on-item-click=\"onItemClick\">全部订单</tab-item>\n </tab>\n <br/>\n <br/>\n <divider>手动切换</divider>\n <tab v-model=\"index01\" prevent-default @on-before-index-change=\"switchTabItem\">\n <tab-item selected>已发货</tab-item>\n <tab-item>未发货</tab-item>\n <tab-item>全部订单</tab-item>\n </tab>\n <br/>\n <br/>\n <divider>定义bar固定宽度</divider>\n <tab :line-width=\"1\" custom-bar-width=\"60px\">\n <tab-item selected>已发货</tab-item>\n <tab-item>未发货</tab-item>\n <tab-item>全部订单</tab-item>\n </tab>\n <br/>\n <br/>\n <divider>使用函数定义bar宽度</divider>\n <tab :line-width=\"1\" :custom-bar-width=\"getBarWidth\">\n <tab-item selected>AA</tab-item>\n <tab-item>AAAA</tab-item>\n <tab-item>AAAAAAA</tab-item>\n </tab>\n <br/>\n <br/>\n <br/>\n <divider>{{ $t('set bar-active-color')}}</divider>\n <tab bar-active-color=\"#668599\" :line-width=\"1\">\n <tab-item>已发货</tab-item>\n <tab-item selected>未发货</tab-item>\n <tab-item>全部订单</tab-item>\n <tab-item>全部订单</tab-item>\n <tab-item>全部订单</tab-item>\n </tab>\n\n <br/>\n <br/>\n <br/>\n <divider>different active class</divider>\n <tab :animate=\"false\">\n <tab-item active-class=\"active-6-1\">已发货</tab-item>\n <tab-item active-class=\"active-6-2\" selected>未发货</tab-item>\n <tab-item active-class=\"active-6-3\">全部订单</tab-item>\n </tab>\n <br/>\n <br/>\n <br/>\n <divider>no animation</divider>\n <tab :animate=\"false\">\n <tab-item>已发货</tab-item>\n <tab-item selected>未发货</tab-item>\n <tab-item>全部订单</tab-item>\n </tab>\n <br/>\n <br/>\n <br/>\n <divider>disabled</divider>\n <tab>\n <tab-item selected>A</tab-item>\n <tab-item>B</tab-item>\n <tab-item disabled>Disabled</tab-item>\n </tab>\n <br/>\n <br/>\n <br/>\n <divider>tab-item badge</divider>\n <tab>\n <tab-item selected badge-label=\"1\">收到的消息</tab-item>\n <tab-item badge-background=\"#38C972\" badge-color=\"#fff\" badge-label=\"2\">发出的消息</tab-item>\n </tab>\n <br/>\n <br/>\n <br/>\n <divider>scroll</divider>\n <tab>\n <tab-item v-for=\"n in 8\" :key=\"n\" :selected=\"n===1\">已发货{{ n }}</tab-item>\n </tab>\n <br/>\n <br/>\n <br/>\n <divider>scroll threshold</divider>\n <tab :scroll-threshold=\"5\">\n <tab-item v-for=\"n in 5\" :key=\"n\" :selected=\"n===1\">已发货{{ n }}</tab-item>\n </tab>\n <br/>\n <br/>\n <br/>\n <div>\n <tab :line-width=2 active-color='#fc378c' v-model=\"index\">\n <tab-item class=\"vux-center\" :selected=\"demo2 === item\" v-for=\"(item, index) in list2\" @click=\"demo2 = item\" :key=\"index\">{{item}}</tab-item>\n </tab>\n <swiper v-model=\"index\" height=\"100px\" :show-dots=\"false\">\n <swiper-item v-for=\"(item, index) in list2\" :key=\"index\">\n <div class=\"tab-swiper vux-center\">{{item}} Container</div>\n </swiper-item>\n </swiper>\n </div>\n\n <br/>\n <div class=\"box\">\n <x-button @click.native=\"index=0\" :disabled=\"index === 0\" type=\"primary\">go to 0</x-button>\n <x-button @click.native=\"index=1\" :disabled=\"index === 1\" type=\"primary\">go to 1</x-button>\n\n <x-button @click.native=\"addTab\" :disabled=\"list2.length === 5\" type=\"primary\">Add tab item</x-button>\n <x-button @click.native=\"removeTab\" :disabled=\"list2.length <= 2\" type=\"primary\">Remove tab item</x-button>\n <x-button @click.native=\"next\" type=\"primary\">Active next current: {{index}}</x-button>\n <x-button @click.native=\"prev\" type=\"primary\">Active prev current: {{index}}</x-button>\n </div>\n\n <br/>\n <br/>\n <tab :line-width=\"2\">\n <tab-item :selected=\"demo3 === item\" v-for=\"(item, index) in list3\" :class=\"{'vux-1px-r': index===0}\" @click=\"demo3 = item\" :key=\"index\">{{item}}</tab-item>\n </tab>\n <br/>\n <br/>\n <br/>\n <sticky scrollBox=\"vux_view_box_body\" :check-sticky-support=\"false\" :offset=\"46\">\n <tab :line-width=1>\n <tab-item :selected=\"demo4 === item\" v-for=\"(item, index) in list4\" @click=\"demo4 = item\" :key=\"index\">{{item}}</tab-item>\n </tab>\n </sticky>\n <br v-for=\"i in 40\">\n </div>\n</template>\n\n\n\n<script>\nimport { Tab, TabItem, Sticky, Divider, XButton, Swiper, SwiperItem } from 'vux'\nconst list = () => ['精选', '美食', '电影', '酒店', '外卖']\n\nexport default {\n components: {\n Tab,\n TabItem,\n Sticky,\n Divider,\n XButton,\n Swiper,\n SwiperItem\n },\n data () {\n return {\n index01: 0,\n list2: list(),\n demo2: '美食',\n list3: ['收到的消息', '发出的消息'],\n demo3: '收到的消息',\n list4: ['正在放映', '即将上映'],\n demo4: '即将上映',\n demoDisabled: 'A',\n index: 0,\n getBarWidth: function (index) {\n return (index + 1) * 22 + 'px'\n }\n }\n },\n methods: {\n switchTabItem (index) {\n console.log('on-before-index-change', index)\n this.$vux.loading.show({\n text: 'loading'\n })\n setTimeout(() => {\n this.$vux.loading.hide()\n this.index01 = index\n }, 1000)\n },\n onItemClick (index) {\n console.log('on item click:', index)\n },\n addTab () {\n if (this.list2.length < 5) {\n this.list2 = list().slice(0, this.list2.length + 1)\n }\n },\n removeTab () {\n if (this.list2.length > 1) {\n this.list2 = list().slice(0, this.list2.length - 1)\n }\n },\n next () {\n if (this.index === this.list2.length - 1) {\n this.index = 0\n } else {\n ++this.index\n }\n },\n prev () {\n if (this.index === 0) {\n this.index = this.list2.length - 1\n } else {\n --this.index\n }\n }\n }\n}\n</script>\n\n<style lang=\"less\" scoped>\n@import '~vux/src/styles/1px.less';\n@import '~vux/src/styles/center.less';\n\n.box {\n padding: 15px;\n}\n.active-6-1 {\n color: rgb(252, 55, 140) !important;\n border-color: rgb(252, 55, 140) !important;\n}\n.active-6-2 {\n color: #04be02 !important;\n border-color: #04be02 !important;\n}\n.active-6-3 {\n color: rgb(55, 174, 252) !important;\n border-color: rgb(55, 174, 252) !important;\n}\n.tab-swiper {\n background-color: #fff;\n height: 100px;\n}\n</style>\n\n
\n