实现菜单导航结构

1.导入字体图标库需要的文件

2.修改引用路径iconfont.css

3.导入到App.vue中

<style>@import url(./static/font/iconfont.css);
</style>

导航区域代码

VUE代码

<template><view class="home"><!-- 导航区域 --><view class="nav"><view class="nav_item" v-for="(item,index) in navs" :key="index" @click="navItemClick(item.path)"><view :class="item.icon"></view><text>{{item.title}}</text></view></view></view>
</template>

JS代码

<script>export default {data() {return {navs: [{icon: 'iconfont icon-ziyuan',title: '黑马超市',path: '/pages/goods/goods'},{icon: 'iconfont icon-guanyuwomen',title: '联系我们',path: '/pages/contact/contact'},{icon: 'iconfont icon-tupian',title: '社区图片',path: '/pages/pics/pics'},{icon: 'iconfont icon-shipin',title: '学习视频',path: '/pages/videos/videos'}]}}}
</script>

scss样式

<style lang="scss">.home {.nav {display: flex; // 开启flex布局，飘到一行.nav_item {width: 25%; // 一行4个text-align: center; // 文字居中view {width: 120rpx; //宽度height: 120rpx; //高度background: #b50e03; //背景色border-radius: 60rpx; //圆角margin: 10px auto; //外边距 左右10 上下自动 line-height: 120rpx; // 上下居中color: #fff; //字体颜色font-size: 50rpx; //图标大小}.icon-tupian {font-size: 45rpx;}text {font-size: 30rpx; //设置文字大小}}}}
</style>

导航页跳转

通过通用方法完成跳转

// 导航点击的处理函数
navItemClick(url) {uni.navigateTo({url})
}