今天开发下点餐页面的左侧分类导航，先看下效果图。
首先新建一个menu.vue，文件路径为pages/menu/menu.vue，新建完之后确认下pages.json文件是否已经写上了对应的目录。menu.vue具体实现代码如下：
<view class="container">
<view class="content">
<scroll-view class="menu" scroll-y>
<view :class="{'wrapper':true,'current': index===currentCateId}" @click="addSelectClass(index)" v-for="(item,index) in menus">
<text style="font-size: 13px;color: #919293;">{{item.name}}</text>
</view>
</scroll-view>
</view>
</view>
实现滚动导航菜单主要用到scroll-view组件，组件具体详细说明可以参考链接说明https://uniapp.dcloud.io/component/scroll-view?id=scroll-view
<view :class="{'wrapper':true,'current': index===currentCateId}" @click="addSelectClass(index)" v-for="(item,index) in menus">
<text style="font-size: 13px;color: #919293;">{{item.name}}</text>
</view>
这段代码主要实现了分类数据的循环，由于目前还没对接后端数据所以先写的静态数据，具体数据定义在data中，实现如下：
<script>
export default {
data() {
return {
menus:[
{"id":1,"name":"招牌热销"},
{"id":2,"name":"豪华双拼"},
{"id":3,"name":"经典小吃"},
{"id":4,"name":"满减优惠"},
{"id":5,"name":"品牌折扣"},
{"id":6,"name":"精品推荐"},
{"id":7,"name":"必须餐具"},
{"id":8,"name":"招牌热销"},
{"id":9,"name":"招牌热销"},
{"id":10,"name":"招牌热销"},
],
currentCateId:0,
}
},
methods: {
addSelectClass(index){
this.currentCateId = index;
}
}
}
</script>
代码循环了menus数据，当发生点击动作时触发addSelectClass(index)，把this.currentCateId = index;赋值，这样就能实现点击菜单时添加class样式。
Css代码部分如下：
.container{
background-color: #ffffff;
}
.content{
display: flex;
position: relative;
width: 100%;
height: calc( 100vh - 180rpx );
}
.content .menu{
width: 30%;
height: 100%;
background-color: #F5F5F5;
}
.wrapper{
height: 40px;
padding: 14px 5px;
align-items: center;
display: flex;
justify-content: center;
}
.current {
background-color: #FFFFFF;
color: #919293;
}
之后可以在浏览器运行看效果了，目前我们做的都是静态页面部分，后期会用php做接口，对接数据。