uniapp 关于头部栏目简单切换
可以直接复制代码，拿到uniapp项目里的新页面测试样式与效果。里面有与只对应的注释。
1 <template >
2 <view >
3 <view class="DDListTop" :style="{'padding-top':paddingtop}">
4 <view class="DDListTopList">
5 <view class="DDListTopListTab" >
6
7 <!-- 动态绑定数据，包括 样式 -->
8 <text :v-model="tabIndex" :style="{'width':tabsWidth+'rpx','height':tabsHeight+'rpx','color':tabIndex==index?activeTxtColor:txtColor}" @click="changeTab(index)" v-for="(item,index) in tab" :key="index">{{item}}</text>
9 </view>
10 <view class="DDListTopListLine" :style="{'width':tabsWidth+'rpx','height':'4rpx','margin-left':lineMarginLeft+'rpx'}"></view>
11 </view>
12 </view>
13 <view class="DDListCon">
14
15 <!-- 循环数组,将对应数据全部填充 tabIndex==1 详情处-->
16 <view class="DDListConBox" v-if="tabIndex==0"><!-- 当与v-model绑定的数一致时显示,反之隐藏 -->
17 <view class="ConList" v-for="(item,index) in dingdan" :key="index" >
18 <view class="ConListTop">
19 <view class="ConListTopLeft">
20 <image :src="item.img" mode=""></image>
21 </view>
22 <view class="ConListTopRight">
23 <view class="ConListTopRightTit">
24 <text>{{item.tit}}</text>
25 </view>
26 <view class="ConListTopRightNum">
27 <view class="ConListTopRightNumStatus">
28 <text v-if="item.status==1">待付款</text>
29 <text v-if="item.status==2">待发货</text>
30 <text v-if="item.status==3">已发货</text>
31 </view>
32 <view class="ConListTopRightNumPrice">
33 ￥<text>{{item.price}}</text>
34 </view>
35 <view class="ConListTopRightNumAmount">
36 x<text>{{item.num}}</text>
37 </view>
38 </view>
39 </view>
40 </view>
41 <view class="ConListBot">
42 <view class="ConListBotPrice" v-if="item.status==1">
43 <text>待付款：</text><text>￥{{item.price}}</text>
44 </view>
45 <view class="ConListBotPrice" v-if="item.status==2">
46 <text>实付：</text><text>￥{{item.price}}</text>
47 </view>
48 <view class="ConListBotPrice" v-if="item.status==3">
49 <text>实付：</text><text>￥{{item.price}}</text>
50 </view>
51 <view class="ConListBotRefunt">
52 <text v-if="item.status==1">取消订单</text>
53 <text v-if="item.status==2 ">申请退款</text>
54 <text v-if="item.status==3">申请退款</text>
55 </view>
56 <view class="ConListBotStatus">
57 <text v-if="item.status==1">立即付款</text>
58 <text v-if="item.status==2">提醒发货</text>
59 <text v-if="item.status==3">查看物流</text>
60 </view>
61 </view>
62 </view>
63 </view>
64
65
66 <!-- 当与v-model绑定的数一致时显示,反之隐藏 -->
67 <view class="DDListConBox" v-if="tabIndex==1">
68
69 <!-- 第二条件，如果显示的数据里面有不属于这个页面的数据同样不显示 -->
70 <view class="ConList" v-for="(item,index) in dingdan" :key="index" v-if="item.status==1">
71
72 <view class="ConListTop">
73 <view class="ConListTopLeft">
74 <image :src="item.img" mode=""></image>
75 </view>
76 <view class="ConListTopRight">
77 <view class="ConListTopRightTit">
78 <text>{{item.tit}}</text>
79 </view>
80 <view class="ConListTopRightNum">
81 <view class="ConListTopRightNumStatus">
82
83 <!-- 样式选择，根据对应的状态，选择对应的显示内容 -->
84 <text v-if="item.status==1">待付款</text>
85 <text v-if="item.status==2">待发货</text>
86 <text v-if="item.status==3">已发货</text>
87 </view>
88 <view class="ConListTopRightNumPrice">
89 ￥<text>{{item.price}}</text>
90 </view>
91 <view class="ConListTopRightNumAmount">
92 x<text>{{item.num}}</text>
93 </view>
94 </view>
95 </view>
96 </view>
97 <view class="ConListBot">
98
99 <!-- 样式选择，根据对应的状态，选择对应的显示内容 -->
100 <view class="ConListBotPrice" v-if="item.status==1">
101 <text>待付款：</text><text>￥{{item.price}}</text>
102 </view>
103 <view class="ConListBotPrice" v-if="item.status==2">
104 <text>实付：</text><text>￥{{item.price}}</text>
105 </view>
106 <view class="ConListBotPrice" v-if="item.status==3">
107 <text>实付：</text><text>￥{{item.price}}</text>
108 </view>
109 <view class="ConListBotRefunt">
110
111 <!-- 样式选择，根据对应的状态，选择对应的显示内容 -->
112 <text v-if="item.status==1">取消订单</text>
113 <text v-if="item.status==2 ">申请退款</text>
114 <text v-if="item.status==3">申请退款</text>
115 </view>
116 <view class="ConListBotStatus">
117
118 <!-- 样式选择，根据对应的状态，选择对应的显示内容 -->
119 <text v-if="item.status==1">立即付款</text>
120 <text v-if="item.status==2">提醒发货</text>
121 <text v-if="item.status==3">查看物流</text>
122 </view>
123 </view>
124 </view>
125 </view>
126 <view class="DDListConBox" v-if="tabIndex==2">
127 <view class="ConList" v-for="(item,index) in dingdan" :key="index" v-if="item.status==2">
128 <view class="ConListTop">
129 <view class="ConListTopLeft">
130 <image :src="item.img" mode=""></image>
131 </view>
132 <view class="ConListTopRight">
133 <view class="ConListTopRightTit">
134 <text>{{item.tit}}</text>
135 </view>
136 <view class="ConListTopRightNum">
137 <view class="ConListTopRightNumStatus">
138 <text v-if="item.status==1">待付款</text>
139 <text v-if="item.status==2">待发货</text>
140 <text v-if="item.status==3">已发货</text>
141 </view>
142 <view class="ConListTopRightNumPrice">
143 ￥<text>{{item.price}}</text>
144 </view>
145 <view class="ConListTopRightNumAmount">
146 x<text>{{item.num}}</text>
147 </view>
148 </view>
149 </view>
150 </view>
151 <view class="ConListBot">
152 <view class="ConListBotPrice" v-if="item.status==1">
153 <text>待付款：</text><text>￥{{item.price}}</text>
154 </view>
155 <view class="ConListBotPrice" v-if="item.status==2">
156 <text>实付：</text><text>￥{{item.price}}</text>
157 </view>
158 <view class="ConListBotPrice" v-if="item.status==3">
159 <text>实付：</text><text>￥{{item.price}}</text>
160 </view>
161 <view class="ConListBotRefunt">
162 <text v-if="item.status==1">取消订单</text>
163 <text v-if="item.status==2 ">申请退款</text>
164 <text v-if="item.status==3">申请退款</text>
165 </view>
166 <view class="ConListBotStatus">
167 <text v-if="item.status==1">立即付款</text>
168 <text v-if="item.status==2">提醒发货</text>
169 <text v-if="item.status==3">查看物流</text>
170 </view>
171 </view>
172 </view>
173 </view>
174 <view class="DDListConBox" v-if="tabIndex==3">
175 <view class="ConList" v-for="(item,index) in dingdan" :key="index" v-if="item.status==3">
176 <view class="ConListTop">
177 <view class="ConListTopLeft">
178 <image :src="item.img" mode=""></image>
179 </view>
180 <view class="ConListTopRight">
181 <view class="ConListTopRightTit">
182 <text>{{item.tit}}</text>
183 </view>
184 <view class="ConListTopRightNum">
185 <view class="ConListTopRightNumStatus">
186 <text v-if="item.status==1">待付款</text>
187 <text v-if="item.status==2">待发货</text>
188 <text v-if="item.status==3">已发货</text>
189 </view>
190 <view class="ConListTopRightNumPrice">
191 ￥<text>{{item.price}}</text>
192 </view>
193 <view class="ConListTopRightNumAmount">
194 x<text>{{item.num}}</text>
195 </view>
196 </view>
197 </view>
198 </view>
199 <view class="ConListBot">
200 <view class="ConListBotPrice" v-if="item.status==1">
201 <text>待付款：</text><text>￥{{item.price}}</text>
202 </view>
203 <view class="ConListBotPrice" v-if="item.status==2">
204 <text>实付：</text><text>￥{{item.price}}</text>
205 </view>
206 <view class="ConListBotPrice" v-if="item.status==3">
207 <text>实付：</text><text>￥{{item.price}}</text>
208 </view>
209 <view class="ConListBotRefunt">
210 <text v-if="item.status==1">取消订单</text>
211 <text v-if="item.status==2 ">申请退款</text>
212 <text v-if="item.status==3">申请退款</text>
213 </view>
214 <view class="ConListBotStatus">
215 <text v-if="item.status==1">立即付款</text>
216 <text v-if="item.status==2">提醒发货</text>
217 <text v-if="item.status==3">查看物流</text>
218 </view>
219 </view>
220 </view>
221 </view>
222 </view>
223 </view>
224 </template>
225
226 <script>
227 export default {
228 data() {
229 return {
230 //页面状态栏加导航标题栏的高度
231 paddingtop:0,
232
233
234 //顶部栏目名称
235 tab: ['全部', '待付款', '待发货','已发货'],
236
237 //自定义头部栏目的一些动态绑定数据
238 tabsWidth:750/4, //宽度
239 tabsHeight:80, //高度
240 lineMarginLeft:0, //下划线左边距
241 tabIndex:0, //v-model
242 txtColor:'#999999', //文字颜色
243 activeTxtColor:'#51AA38', //选中文字颜色
244
245 //模拟的数据
246 dingdan:[
247 {id:'1',img:'../../static/banner5.png',tit:'商品1',price:'123',num:'1',status:'1'},
248 {id:'2',img:'../../static/banner5.png',tit:'商品2',price:'321',num:'2',status:'2'},
249 {id:'3',img:'../../static/banner5.png',tit:'商品3',price:'213',num:'3',status:'3'}
250 ]
251 };
252 },
253 onLoad:function(){
254 //（在app.vue页面已经将设备的状态栏信息存入本地，此处拿取即可）
255
256 //下面是获取设备的方法，存入onlaunch方法内即可，这样别的页面onload方法内部可以调取使用
257 // uni.getSystemInfo({
258 // success:function(res){
259 // if(res.model.indexOf('iPhone')!== -1){
260 // var paddingtop=res.statusBarHeight+44+'px';
261 // uni.setStorageSync('paddingtop', paddingtop);
262 // }else{
263 // var paddingtop=res.statusBarHeight+48+'px';
264 // uni.setStorageSync('paddingtop', paddingtop);
265 // }
266 // }
267 // })
268
269 this.paddingtop = uni.getStorageSync('paddingtop'); //获取到的设备状态栏的高加导航标题的高
270 },
271 methods:{
272 changeTab(index) {
273 //点击tab的栏目，拿取相对应的index，计算得到该栏目的左边距，并将值赋予对应下划线的左边距
274 let nums= Number(index) * Number(this.tabsWidth);
275 this.lineMarginLeft=nums;
276 this.tabIndex=index;
277 },
278 },
279 components: {
280 }
281 }
282 </script>
283
284 <style lang="scss">
285 page{
286 height: 100%;
287 background-color: #F6F5F5;
288
289 }
290 .DDListTop{
291 @extend .WidthAll;
292 height: 80rpx;
293 background-color: #FFFFFF;
294 z-index: 888;
295 position: fixed;
296 top: 0;
297 left: 0;
298 .DDListTopList{
299 height: 80rpx;
300 width: 750rpx;
301
302 .DDListTopListTab{
303 display: flex;
304 justify-content: center;
305 align-items: center;
306 text{
307 display: flex;
308 justify-content: center;
309 align-items: center;
310
311 }
312 }
313 .DDListTopListLine{
314 background-color: #51AA38;
315 transition: all 0.8s;
316 }
317 }
318 }
319
320 .DDListCon{
321 @extend .WidthAll;
322 height: 100%;
323 padding-top: 80rpx;
324 .DDListConBox{
325 @extend .WidthAll;
326 .ConList{
327 @extend .WidthAll;
328 height: 242rpx;
329 margin-top: 20rpx;
330 background-color: #FFFFFF;
331 @extend .FlexColumnMiddle;
332 .ConListTop{
333 width: 710rpx;
334 height: 148rpx;
335 margin: 0 auto;
336 @extend .FlexMiddleB;
337 .ConListTopLeft{
338 width: 186rpx;
339 height: 148rpx;
340 @extend .FlexMiddle;
341 image{
342 width: 186rpx;
343 height: 148rpx;
344 @extend .FlexMiddle;
345 }
346 }
347 .ConListTopRight{
348 width: 500rpx;
349 height: 148rpx;
350 @extend .FlexMiddleB;
351 .ConListTopRightTit{
352 width: 340rpx;
353 height: 148rpx;
354 font-size: 28rpx;
355 color: #333333;
356 line-height: 42rpx;
357 font-weight: bold;
358 text{
359 text-align: left;
360 }
361 }
362 .ConListTopRightNum{
363 width: 150rpx;
364 height: 148rpx;
365 font-weight: bold;
366 line-height: 42rpx;
367 text-align: right;
368 &Status{
369 font-size: 22rpx;
370 color: #FF3C31;
371 }
372 &Price{
373 font-size: 26rpx;
374 color: #999999;
375 }
376 &Amount{
377 font-size: 22rpx;
378 color: #999999;
379 }
380 }
381 }
382
383 }
384 .ConListBot{
385 width: 710rpx;
386 height: 38rpx;
387 margin: 0 auto;
388 font-weight: bold;
389 @extend .FlexEnd;
390 &Price{
391 width: 190rpx;
392 height: 36rpx;
393 @extend .FlexMiddle;
394 font-size: 26rpx;
395 color: #FF3C31;
396 text{
397 text-align: center;
398 }
399 }
400 &Refunt{
401 @extend .FlexMiddle;
402 color: #999999;
403 font-size: 20rpx;
404 padding: 6rpx 16rpx;
405 margin-left: 20rpx;
406 border: 1rpx solid #999999;
407 border-radius: 4rpx;
408 }
409 &Status{
410 @extend .FlexMiddle;
411 color: #FF463C;
412 font-size: 20rpx;
413 padding: 6rpx 16rpx;
414 margin-left: 20rpx;
415 border: 1rpx solid #FF3C31;
416 border-radius: 4rpx;
417 }
418 }
419 }
420 }
421
422 }
423 </style>
忍一时，越想越气；
退一步，哎呦我去！
