实现菜单导航结构
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})
}
