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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
| <template>
| <view v-if="tabs && tabs.length" class="app-tabs" :class="{'tabs-fixed': fixed}">
| <view class="tabs-item">
| <view class="tab-item" v-for="(tab, i) in tabs" :class="{'active': value===i}" :key="i" @click="tabClick(i)">
| {{getTabName(tab)}}
| </view>
| </view>
| <view class="tabs-line" :style="{left:lineLift}"></view>
| </view>
| </template>
|
| <script>
| export default {
| props:{
| tabs: Array,
| value: { // 当前显示的下标 (使用v-model语法糖: 1.props需为value; 2.需回调input事件)
| type: [String, Number],
| default(){
| return 0
| }
| },
| fixed: Boolean // 是否悬浮,默认false
| },
| computed: {
| lineLift() {
| return 100/this.tabs.length*(this.value + 1) - 100/(this.tabs.length*2) + '%'
| }
| },
| methods: {
| getTabName(tab){
| return typeof tab === "object" ? tab.name : tab
| },
| tabClick(i){
| if(this.value!=i){
| this.$emit("input",i);
| this.$emit("change",i);
| }
| }
| }
| }
| </script>
|
| <style>
| .app-tabs{
| position: relative;
| height: 80rpx;
| line-height: 80rpx;
| font-size: 24rpx;
| background-color: #fff;
| border-bottom: 1rpx solid #eee;
| }
| .app-tabs .tabs-item{
| display: flex;
| text-align: center;
| font-size: 28rpx;
| }
| .app-tabs .tabs-item .tab-item{
| flex: 1;
| }
| .app-tabs .tabs-item .active{
| color: red;
| }
| .app-tabs .tabs-line{
| position: absolute;
| bottom: 0;
| width: 150rpx;
| height: 4rpx;
| transform: translateX(-50%);
| border-radius: 4rpx;
| transition: left .3s;
| background: red;
| }
|
| /*悬浮*/
| .app-tabs.tabs-fixed{
| z-index: 9999;
| position: fixed;
| top: var(--window-top);
| left: 0;
| width: 100%;
| }
| </style>
|
|
