uniapp实现菜单栏的轮播效果
效果图：
菜单栏可以切换
目前效果：
data() {
return {
swipers: "../../static/swiper.jpg",
navs: [
{
icon: "../../static/yz.png",
tit: "基金",
path: "/pages/goods/goods",
},
{
icon: "iconfont icon-ziyuan",
tit: "会计职称",
path: "/pages/goods/goods",
},
{
icon: "iconfont icon-ziyuan",
tit: "注册会计师",
path: "/pages/goods/goods",
},
{
icon: "iconfont icon-ziyuan",
tit: "经济师",
path: "/pages/goods/goods",
},
{
icon: "iconfont icon-ziyuan",
tit: "注册建造师",
path: "/pages/goods/goods",
},
{
icon: "iconfont icon-ziyuan",
tit: "银行",
path: "/pages/goods/goods",
},
{
icon: "iconfont icon-ziyuan",
tit: "税务师",
path: "/pages/goods/goods",
},
{
icon: "iconfont icon-ziyuan",
tit: "管理会计",
path: "/pages/goods/goods",
},
{
icon: "iconfont icon-ziyuan",
tit: "证券",
path: "/pages/Login/Login",
},
{
icon: "iconfont icon-ziyuan",
tit: "消防工程师",
path: "/pages/goods/goods",
},
],
};
},
<scroll-view scroll-x="true" class="sw">
<view class="nav">
<view
class="nav_item"
v-for="(item, index) in navs"
:key="index"
@click="navItemClick(item.path)"
>
<image class="pic" :class="item.icon"></image>
<view class="tit">{{ item.tit }}</view>
</view>
</view>
</scroll-view>
/* 导航轮播菜单区域 */
.nav {
width: 100%;
height: 220px;
/* background: red; */
display: flex;
flex-wrap: wrap;
justify-content: space-between;
/* align-items: center; */
}
.nav .nav_item {
width: 15%;
height: 100px;
/* border: 1px solid red; */
margin: 5px;
}
.nav .pic {
height: 60px;
width: 60px;
background: pink;
border-radius: 50%;
}
.nav .tit {
font-size: 12px;
display: flex;
justify-content: center;
margin-top: 10px;
}
