本文实例为大家分享了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