uniapp首页样式，实现菜单导航结构

实现菜单导航结构

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
	})
}