uni-app中有横向导航栏和纵向导航栏的插件,如下（实现方式大同小异，看自身习惯程度）：
https://ext.dcloud.net.cn/plugin?id=1149
<template>
<view class="nav">
<view class="search-box" @click="toSearch">
<view class="search-input-box">
<view class="iconfont"></view>
<input class="search-input" placeholder="搜索商品名称或粘贴商品标题" />
<view style="height: 100%;width: 100%;position: absolute;left:0;top: 0;"></view>
</view>
</view>
<scroll-view class="nav-left" scroll-x :scroll-left="viewScrollLeft" @scroll="viewScroll" @scrolltolower="scrolltolower">
<view class="nav-left-item" v-for="(item,index) in list" :key="index" :class="{active:index==navIndex}" @click="goodClassifyClick(index)">{{item.name}}</view>
</scroll-view>
<!-- <view class="nav-right" @click="toGoodClassify">
<image class="nav-image" src="../../static/icon/v2_q0u4l9.png"></image>
</view> -->
</view>
</template>
<script>
export default {
data(){
return{
viewScrollLeft:0
}
},
props:{
list:{
type: Array,
required: true,
default:()=>[]
},
navIndex:{
type: Number,
required: true,
default:0
}
},
methods:{
toSearch(){
uni.navigateTo({
url:'/pages/search/search'
})
},
scrolltolower(e){
console.log(e)
},
viewScroll(e){
this.viewScrollLeft = e.detail.scrollLeft
},
viewScrollToLeft(e){
this.viewScrollLeft = 0
},
goodClassifyClick(index){
this.$emit('goodClassifyClick',index)
},
toGoodClassify(){
uni.navigateTo({
url:'/pages/good/classify'
})
}
}
}
</script>
<style lang="scss" scoped>
.nav{
width: 750rpx;
position: fixed;
left: 0;
// top: 0;
z-index: 2;
.nav-left{
width: 750rpx;
height: 72rpx;
padding-left: 20rpx;
box-sizing: border-box;
// display: flex;
zoom: 1;
overflow: hidden;
white-space: nowrap;
.nav-left-item{
// float: left;
display: inline-block;
padding: 0 5rpx;
margin-right: 20rpx;
// flex: 1;
line-height: 66rpx;
color: rgba(255, 255, 255, 0.95);
font-size: 28rpx;
text-align: center;
box-sizing: border-box;
border-bottom: 6rpx solid transparent;
&.active{
font-size: 32rpx;
// border-bottom: 6rpx solid rgba(255, 255, 255, 1);
color: rgba(255, 255, 255, 1);
font-weight:bold ;
position: relative;
&::after{
content: '';
width: 34rpx;
height: 0;
border-top: 4rpx solid rgba(255, 255, 255, 1);
position: absolute;
bottom: 5rpx;
left: 50%;
transform: translateX(-50%);
}
}
}
}
.nav-right{
width: 100rpx;
position: relative;
&::after{
content: '';
height: 50rpx;
width: 0;
border-right: 2rpx solid rgba($color: #333, $alpha: 0.3);
position: absolute;
top: 11rpx;
left: 0;
}
}
.nav-image{
width: 40rpx;
height: 40rpx;
display: block;
margin: 16rpx auto;
}
}
.search-box{
padding: 10rpx 0;
.search-input-box{
width: 692rpx;
height: 64rpx;
box-sizing: border-box;
line-height: 62rpx;
border-radius: 32rpx;
color: rgba(16, 16, 16, 1);
font-size: 24rpx;
border: 1rpx solid rgba(179, 178, 178, 0);
margin: auto;
display: flex;
align-items: center;
position: relative;
.iconfont{
margin: 0 20rpx;
color: rgba(142, 142, 147, 1);
font-size: 28rpx;
}
.search-input{
width: 556rpx;
height: 48rpx;
color: rgba(136, 136, 136, 1);
font-size: 28rpx;
}
}
}
</style>
对代码的部分必要说明：下面注意注释的代码，seach这个icon用法是一致，看习惯哪一种写法，因复杂度而变
<view class="search-input-box">
<!-- <view class="iconfont"></view> -->
<icon type="search" size="16"/>
<input class="search-input" placeholder="搜索商品名称或粘贴商品标题" />
<view style="height: 100%;width: 100%;position: absolute;left:0;top: 0;"></view>
</view>
在父组件的引用如下：（需要用到的数据去腐组件做对应的操作）
<navc :list="navList" ref="navc" :navIndex="navIndex" @goodClassifyClick="goodClassifyClick"></navc>
this.navList=res.data.categoryList
this.navList.unshift({
name:'推荐'
})
goodClassifyClick(index){
if(index==this.navIndex){
return
}
this.toTop()
this.navIndex=index
this.pageNo=1
this.isLastPage=false
if(index!=0){
this.queryTargetCategoryById(this.navList[index].id)
this.getCategoryGoodsList()
}
},
对应的在父组件的操作先不一一写出来，主要是根据对应的功能一一来实现