tm-tabs 选项卡切换
🎉目录导航
👉使用方法,跟数1,2,3一样简单
基本示例
<tm-tabs v-model="activeIndex" :list="list" ></tm-tabs>
1
<script>
export default {
data() {
return {
activeIndex:0,
list:[ '母婴产品','已完成','待审核中'],
};
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
👉完整的示例
可以复制到页面直接运行
<template>
<view class="">
<tm-menubars title="倒计时" color="bg-gradient-blue-accent" :showback="true"></tm-menubars>
<tm-tabs v-model="activeIndex" :list="list" range-key="title"></tm-tabs>
<view class="pa-32 text-size-s text-weight-b blue text my-32">左右滑动</view>
<tm-tabs color="red" v-model="activeIndex1" :list="list2" active-key-value="选中我了吗" range-key="title" align="left"></tm-tabs>
<view class="px-32 py-12 text-size-s text-weight-b blue text my-32">右对齐</view>
<tm-tabs bg-color="blue" color="yellow" align="right" v-model="activeIndex2" :list="list" range-key="title"></tm-tabs>
<view class="px-32 py-12 text-size-s text-weight-b blue text my-32">左对齐</view>
<tm-tabs bg-color="black" color="yellow" align="left" v-model="activeIndex5" :list="list" range-key="title"></tm-tabs>
<view class="px-32 py-12 text-size-s text-weight-b blue text my-32">居中对齐</view>
<tm-tabs bg-color="green" color="yellow" v-model="activeIndex6" :list="list" range-key="title"></tm-tabs>
<view class="px-32 py-12 text-size-s text-weight-b blue text my-32">均分</view>
<tm-tabs bg-color="bg-gradient-purple-accent" color="yellow" align="split" v-model="activeIndex7" :list="list" range-key="title"></tm-tabs>
<view class="pa-32 text-size-s text-weight-b blue text my-32">渐变</view>
<tm-tabs bg-color="bg-gradient-red-accent" color="yellow" v-model="activeIndex3" :list="list" range-key="title"></tm-tabs>
<view class="pa-32 text-size-s text-weight-b blue text my-32">切换框形样式</view>
<tm-tabs height="60" model="rect" color="blue" v-model="activeIndex4" :list="list" range-key="title"></tm-tabs>
<view class="pa-32 text-size-s text-weight-b blue text my-32"></view>
</view>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
export default {
data() {
return {
activeIndex:0,
list:[ '母婴产品','已完成','待审核中'],
activeIndex1:2,
activeIndex2:0,
activeIndex3:0,
activeIndex4:0,
list2:[
{title:'母婴产品'},
{title:'已完成'},
{title:'待审核中'},
{title:'选中我了吗'},
{title:'待审核中'},
{title:'待审核中'},
],
}
},
methods: {
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
👉props属性表
注意
当外框样式model = rect时，项目数量不能超过一屏，且 align必须为居中即align = cnter
如果当你的项目数量可能会超过一屏时或者N多个时，align=left才是正确的做法。
| 属性名称 | 类型 | 可选值 | 默认值 | 说明 |
|---|---|---|---|---|
| value.sync | Number | 任意数字 | 0 | 当前激活的项。双向绑定使用value.sync或者v-model |
| model | String | line/rect/fill | line | 样式，线和框,背景选中三种,fill为1.2.29新增 |
| color | String | 任意主题名称 | primary | 主题文字颜色 |
| active-border-color | String | 任意主题名称 | '' | 默认使用color主题色,底下指示线的颜色主题。 |
| bg-color | String | 任意主题名称 | white | 主题背景颜色 |
| align | String | center/left/right/split | center | 居中，左，右，均分对齐 |
| height | Number | 任意整数 | 90 | 高度。单位 upx |
| font-size1.1.4 | Number | 任意整数 | 28 | 默认字体大小。单位 upx |
| font-color1.2.293 | String | 任意主题名称 | '' | 默认文字颜色,默认为空，使用主题自动匹配文字色。 |
| active-font-size1.1.4 | Number | 任意整数 | 28 | 激活后字体大小。单位 upx |
| list | Array | 字符串数组和对象数组 | [] | 选项卡数据 |
| range-key | String | - | '' | list对象数组时，需要提供rangKey以显示文本。 |
| active-key-value | String | - | '' | list对象数组时，可以用显示的文本作为默认选中的indx索引 |
下面示例表示list,range-key,active-key-value间的关系
技巧
为什么要设置对象数组，并且搞一个active-key-value来默认选中的功能呢？
因为读取后台数据时，有时后台返回的正是你选项卡中默认的选择数据而不是返回你的索引index
此时这个功能就节省了你大量的时间了，自动帮你选择啦。
<!-- 下面是字符串，直接可以显示。activeIndex为默认选中的项 -->
<tm-tabs v-model="activeIndex" :list="['项目1','项目2']"></tm-tabs>
<!-- 下面是对象数组，需要提供range-key来显示文本，activeIndex为默认选中的项 -->
<tm-tabs v-model="activeIndex" range-key="title" :list="[{title:'母婴产品'},{title:'母婴产品2'}]"></tm-tabs>
<!-- 下面是对象数组，需要提供range-key来显示文本，activeIndex为默认选中的项 -->
<!-- 但你也可以使用 文本 来默认选中，并且activeIndex=0会被覆盖为1，即默认选中了第2个。 -->
<tm-tabs v-model="activeIndex"
active-key-value = "母婴产品2"
range-key="title" :list="[{title:'母婴产品'},{title:'母婴产品2'}]"></tm-tabs>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
👉事件
| 事件名称 | 返回参数 | 返参类型 | 说明 |
|---|---|---|---|
| @change | - | - | 选项卡变换时触发 |
示例
<tm-tabs @change="change" v-model="activeIndex" :list="['项目1','项目2']"></tm-tabs>
1
2
2
<script>
export default {
data() {
return {
activeIndex:0,
}
},
methods: {
change(e){
uni.$tm.toast(`你选中了${e}`);
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
👉更新日志
2021年8月20日14:8:5 初始版本。