本文实例为大家分享了uniapp实现左右滑动导航栏的具体代码，供大家参考，具体内容如下
|
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
|
<template> <view> <home-view></home-view> <view class="content-box" :id="isScale?'content-box-too':''"> <view class="nav-head-box top-nav-fixed"> <image @click="isScale=!isScale" class="icon-style" src="/static/iconImg/list.png" mode=""></image> <view style="height: 100%;" class="ft-color-white ft-36 flex-1 flex-wrap align-items-center justify-content-center"> PIQSCORE </view> <text style="margin-right: 16upx;" class="iconfont icon-UI_icon_shebeisheshi ft-44 ft-color-red"></text> <text style="right: 30upx;bottom: 14upx;" class="iconfont icon-UI_icon_shebeisheshi ft-color-red ft-32 position-absolute"></text> </view> <view class="m-top-128 top-nav width-100 pd-f-r-36 ft-color-white flex-nowrap space-between position-relative"> <view v-for="(item,index) in 4" :key="index" @click="currentIndex=index" class="top-nav-item"> ALL </view> <view :style="'left:'+(currentIndex*164+36)+'upx'" class="position-absolute top-nav-child"></view> </view> <swiper style="height: 1122upx;" :current="currentIndex" @change="swiperTab"> <swiper-item v-for="(item,index) in list" :key="index"> <view class="width-100 height-100" style="background: #CCCCCC;"> {{index}} </view> </swiper-item> </swiper> </view> </view></template> <script> export default{ data(){ return{ isScale:false, currentIndex:0, list:["ALL","ALL","ALL","ALL"] } }, methods:{ swiperTab(e) { this.currentIndex = e.detail.current //获取索引 }, } }</script> <style> .top-nav{ height: 84upx; background: #008800; } .top-nav-item{ width: 168upx; line-height: 82upx; text-align: center; } .top-nav-child{ left: 0; bottom: 0; width: 164upx; background: #32B53F; height: 6upx; transition: all 0.5s; }</style> |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/weixin_42307129/article/details/103306219
