本文實例為大家分享了uniapp實現可滑動選項卡的具體代碼，供大家參考，具體內容如下
tabControl-tag.vue
|
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
|
<template name="tabControl"> <scroll-view scroll-x="true" :style="'background-color:'+bgc+';top:'+top+'px;'" :class="fixed?'fxied':''" :scroll-left='scrollLeft' scroll-with-animation id="tabcard"> <view class="tabList" :style="isEqually?'display: flex;justify-content: space-between;padding-left:0;':''"> <view :class="'tabItem'+(currentIndex==index?' thisOpenSelect':'')" :style="isEqually? 'width:'+windowWidth/values.length+'px;margin-right:0;':''" v-for="(item,index) in values" :id="'item'+index" :key='index' @click="_onClick(index)"> <text :style="(currentIndex==index?'font-size:'+activeSize+'rpx;color:'+activeColor:'font-size:'+itemSize+'rpx')">{{item}}</text> <view class="activeLine" :style="{width: lineWidth+'rpx'}"></view> </view> </view> </scroll-view></template><script> export default { name:'tabControl', props:{ current: { type: Number, default: 0 }, values: { type: Array, default () { return [] } }, bgc:{ type:String, default:'' }, fixed:{ type:Boolean, default:false }, scrollFlag:{ type:Boolean, default:false }, lineWidth:{ type:Number, default: 100 }, itemSize:{ type:Number, default: 30 }, activeSize:{ type:Number, default: 32 }, activeColor:{ type:String, default:'' }, top:{ type:Number, default: 0 }, isEqually:{ type:Boolean, default:false } }, data() { return { currentIndex: 0, windowWidth:0, //設備寬度 leftList:[], //選項距離左邊的距離 widthList:[], //選項寬度 scrollLeft:0, //移動距離 newScroll:0, //上一次移動距離(用來判斷是左滑還是右滑) wornScroll:0, //上一次移動距離(用來判斷是左滑還是右滑) }; }, created(){ }, mounted(){ setTimeout(()=>{ uni.createSelectorQuery().in(this).select("#tabcard").boundingClientRect((res)=>{ this.$emit('getTabCardHeight', {height:res.height}) }).exec() uni.getSystemInfo({ success: (res)=> { this.windowWidth = res.windowWidth; // console.log(this.windowWidth); this.values.forEach((i,v)=>{ let info = uni.createSelectorQuery().in(this); info.select("#item"+v).boundingClientRect((res)=>{ // 獲取第一個元素到左邊的距離 // if(v==0){ // this.startLenght = res.left // } this.widthList.push(res.width) this.leftList.push(res.left) }).exec() }) // console.log(this.leftList) // console.log(this.widthList) } }); }) }, created() { this.currentIndex = this.current if(this.scrollFlag){ setTimeout(()=>{ this.tabListScroll(this.current) },300) } }, watch: { current(val) { if (val !== this.currentIndex) { this.currentIndex = val if(this.scrollFlag){ this.tabListScroll(val) } } }, }, methods: { _onClick(index) { if (this.currentIndex !== index) { this.currentIndex = index this.$emit('clickItem', {currentIndex:index}) // 開啟滾動 if(this.scrollFlag){ this.tabListScroll(index) } } }, // 選項移動 tabListScroll(index){ let scoll = 0; this.wornScroll = index; // this.wornScroll-this.newScroll>0 在向左滑 ←←←←← if(this.wornScroll-this.newScroll>0){ for(let i = 0;i<this.leftList.length;i++){ if(i>1&&i==this.currentIndex){ scoll = this.leftList[i-1] } } // console.log('在向左滑',scoll) }else{ if(index>1){ for(let i = 0;i<this.leftList.length;i++){ if(i<index-1){ scoll = this.leftList[i] } } }else{ scoll = 0 } // console.log('在向右滑') } this.newScroll = this.wornScroll; this.scrollLeft = scoll; } } }</script><style lang="less" scoped> .fxied{ position: fixed; z-index: 2; } .tabList{ padding-top: 24rpx; padding-left: 24rpx; padding-bottom: 8rpx; white-space: nowrap; text-align: center; .tabItem{ margin-right: 60rpx; display: inline-block; position: relative; text{ // font-size: 30rpx; line-height: 44rpx; color: #666; transition: all 0.3s ease 0s; } .activeLine{ // width: 48rpx; height: 8rpx; border-radius: 4rpx; background-color: #F57341; margin-top: 8rpx; margin-left: 50%; transform: translateX(-50%); opacity: 0; transition: all 0.3s ease 0s; } } .tabItem:first-child{ // margin-left: 22rpx; } .tabItem:last-child{ margin-right: 24rpx; } .thisOpenSelect{ text{ color: #333; font-weight:600; // font-size: 32rpx; } .activeLine{ opacity: 1; } } } </style> |
頁面引用
|
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
|
<template> <view class="page"> <tabControl :current="current" :values="items" bgc="#fff" :fixed="true" :scrollFlag="true" :isEqually="false" @clickItem="onClickItem"></tabControl> <!-- 使用 swiper 配合 滑動切換 --> <swiper class="swiper" style="height: 100%;" @change="scollSwiper" :current="current"> <swiper-item v-for="(item, index) in items" :key="index"> <!-- 使用 scroll-view 來滾動內容區域 --> <scroll-view scroll-y="true" style="height: 100%;">{{ item }}</scroll-view> </swiper-item> </swiper> </view></template><script>import tabControl from '@/components/tabControl-tag/tabControl-tag.vue';export default { components: { tabControl }, data() { return { items: ['業績統計', '選項卡2', '選項卡3', '選項卡4', '選項卡5'], current: 0 }; }, onLoad() {}, methods: { onClickItem(val) { this.current = val.currentIndex; }, scollSwiper(e) { this.current = e.target.current; } }};</script><style>page { height: 100%;}.page { padding-top: 98rpx; height: 100%;}</style> |
1.使用方式：
scrollFlag --是否開啟選項滾動(true -開啟 false -關閉) 根據自己需求如果選項長度超出屏幕長度 建議開啟
fixed --固定定位
bgc --背景色
values --選項數組
current --當前選中選項索引
isEqually --是否開啟選項平分寬度(true,false)
lineWidth --下劃線長度（在非平分選項狀態下 可能會影響選項盒子的寬度-自行調試想要的效果，默認為48rpx）
itemSize --未選中選項字體大小(默認為30rpx)
activeSize --選中選項字體大小(默認為32rpx)
activeColor --選中選項字體顏色(默認#333)
top --選項卡固定定位 自定義top距離
注意：
使用fixed固定頭部的時候 要將頁面整體padding-top：98rpx;不然會蓋住內容區域。
使用swiper實現滑動切換時 要將page 高度設置100% swiper高度100% 才可以全屏滑動切換
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/weixin_44816309/article/details/106661706
