24. uniapp 实现导航的基本结构

一. 首先到阿里巴巴矢量图库下载 加入购物车，加入创建文件(多个)一起下载 引入static 找到iconfont.css文件夹引入 APP.vue中
style里面 然后路径改成/static/font/font/里面的路径的位置都要改如下

@font-face {font-family: "iconfont";
  src: url('/static/font/font/iconfont.eot?t=1619012002908'); /* IE9 */			/* 	下面 iconfont这个五个都需要更改 */
  src: url('/static/font/font/iconfont.eot?t=1619012002908#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('/static/font/font/iconfont.woff?t=1619012002908') format('woff'),
  url('/static/font/font/iconfont.ttf?t=1619012002908') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('/static/font/font/iconfont.svg?t=1619012002908#iconfont') format('svg'); /* iOS 4.1- */
}

二. 使用组件里面直接用

<!-- 导航区域 -->
		<view class="nav">
			<view class="nav_item">
				<view class="iconfont icon-chaoshi"></view>
				<text>小小视频</text>
			</view>
			
			<view class="nav_item">
				<view class="iconfont icon-guanyuwomen"></view>
				<text>联系我们</text>
			</view>
			
			<view class="nav_item">
				<view class="iconfont icon-tupian"></view>
				<text>社区图片</text>
			</view>
			
			<view class="nav_item">
				<view class="iconfont icon-shipin"></view>
				<text>学习视频</text>
			</view>
		</view>

.nav{
			display: flex;
			.nav_item{
				flex:1;
				text-align: center;
				view{
					width: 120rpx;
					height: 120rpx;
					background-color: #b50e03;
					border-radius: 60rpx;
					margin: 10rpx auto;
					line-height: 120rpx;
					font-size: 50rpx;
				}
				.icon-tupian{
					font-size: 45rpx;
				}
			}
		}