导航栏制作

这里用微信小程序为例，写一个导航栏例子。大体思路就是先在wxml页面渲染是每个标签带有一个for循环的index数据，然后再应试选择当前选择项是否等于标签本身带有的index数据即可。js脚本用于处理点击事件。

WXML页面代码

<scroll-view class="listMenu" scroll-y scroll-with-animation scroll-top="{{scrollTops}}">
    <view class="menuBox  " wx:for="{{foodDatas}}">
        <view class="menuName {{tabCur===index?'menuActive':''}}" bindtap="bindTapMenuList" data-index="{{index}}">{{item.typeName}}</view>
    </view>
</scroll-view>

这是写的是侧边栏的样式

.listMenu{
    width: 120rpx;
    /* margin-left: 20rpx; */
    display: flex;
    flex-direction: column;
}
.menuBox{
    display: flex;
    flex-direction: column;
    margin-bottom: 20rpx;
    text-align: center;
}
.menuName{
    margin-top: 5rpx;
}
.menuActive{
    background-color: red;
    /* border-radius: 20rpx; */
}

JavaScript脚本

Page({

    data: {

        menuList:[
            {menuImg:"",menuName:"套餐",isActive:true},
            {menuImg:"",menuName:"汉堡",isActive:false},
            {menuImg:"",menuName:"炸鸡",isActive:false},
            {menuImg:"",menuName:"小食",isActive:false},
            {menuImg:"",menuName:"饮料",isActive:false},
            {menuImg:"",menuName:"小料",isActive:false},
        ],
        tabCur: 0,  // 当前项
    },
    bindTapMenuList(e){
        let index = e.currentTarget.dataset.index;
        this.setData({
            tabCur: index,
        })
    },

})