uniapp 仿照黑马商城笔记-实现导航栏基本结构

上一篇
我这里就把bilibili的图标文件就搞过来了,可以参考

把文件放在你的src/static/下，这个是图标文件

<template>
	<view>
		......

			<!-- 导航区域 -->
			<view class="nav">
				<!-- 每一项导航 -->
				<view class="nav_item">
					<!-- 图标 -->
					<view></view>
					<!-- 文字 -->
					<text>主要首页</text>
				</view>
			</view>

		</view>
	</view>
</template>

要想把之前的文件要导入进来就要借助@font-fac放在公共的css(App.vue)中，而且要改具体如下:

/*每个页面公共css */
@font-face {
	font-family: bilifont;
	src: url(~@/static/bilibiliFeil/iconfont.woff2) format("woff2"), 
	url(~@/static/bilibiliFeil/iconfont.woff) format("woff"), 
	url(~@/static/bilibiliFeil/iconfont.ttf) format("truetype");
}
.bilifont{
	font-family:bilifont!important;
	font-size:16px;
	font-style:normal;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale
}

这俩个元素至关重要

就导入进小程序的样式里了

没报错就可以使用字体图标了

添加元素(随便定义一个css元素):

.master_home:before{
	content: "\E738";/*bilibili图标content值*/
}

定义index.vue的时候class元素首先要定义bilifont:

<view class="bilifont master_home"></view>

整段vue的template元素

<template>
	<view>
		<view class="home_swiper">
			<swiper indicator-dots circular autoplay="true" :interval="2000">
				<swiper-item v-for="item in swipers" :key="item.id">
					<image :src="item.photo"></image>
				</swiper-item>
			<!--前面的轮播图代码-->
			</swiper>

			<!-- 导航区域 -->
			<view class="nav">
				<!-- 每一项导航 -->
				<view class="nav_item">
					<!-- 图标 -->
					<view class="bilifont master_home"></view>
					<!-- 文字 -->
					<text>主要首页</text>

				</view>
			</view>
		</view>
	</view>
</template>

再添加三个，加上 上一个的css和vue:

<template>
	<view>
		<view class="home_swiper">

			<!-- 导航区域 -->
			<view class="nav">
				<!-- 每一项导航 -->
				<!-- 主要首页 -->
				<view class="nav_item">
					<!-- 图标 -->
					<view class="bilifont master_home"></view>
					<!-- 文字 -->
					<text>主要首页</text>
				</view>

				<!-- 频道 -->
				<view class="nav_item">
					<!-- 图标 -->
					<view class="bilifont master_pindao"></view>
					<!-- 文字 -->
					<text>频道</text>
				</view>
				
				<!-- 热门 -->
				<view class="nav_item">
					<!-- 图标 -->
					<view class="bilifont master_fire"></view>
					<!-- 文字 -->
					<text>热门</text>
				</view>

				<!-- 观看 -->
				<view class="nav_item">
					<!-- 图标 -->
					<view class="bilifont master_watchUp"></view>
					<!-- 文字 -->
					<text>观看直播</text>
				</view>
			</view>
		</view>
	</view>
</template>

/*每个页面公共css */
@font-face {
	font-family: bilifont;
	src: url(~@/static/bilibiliFeil/iconfont.woff2) format("woff2"), 
	url(~@/static/bilibiliFeil/iconfont.woff) format("woff"), 
	url(~@/static/bilibiliFeil/iconfont.ttf) format("truetype");
}
.bilifont{
	font-family:bilifont!important;
	font-size:16px;
	font-style:normal;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale
}

.master_home:before{
	content: "\E738";
}
.master_pindao:before{
	content: "\E760";
}
.master_watchUp:before{
	content: "\E72D";
}
.master_fire:before{
	content: "\E763";
}

给自己的样式安装scss

用vue-cli安装scss

npm install node-sass --save-dev
npm install sass-loader --save-dev

如果看到这个错误(fhmsc_uniapp@0.1.0 dev:mp-weixin: 'cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch')的话，解决方法:

首先删除刚刚所下的包(再node_module里，直接搜索)

导致这个问题的原因可能是：node-sass和sass-loader的版本不相符合
重新下包就可以了，如下版本绝对是没有问题的

npm i node-sass@4.14.1 sass-loader@7.3.1

原文

.nav{
	display: flex;
	.nav_item{
		width: 25%;
		text-align: center;
		view{
			width: 120rpx;	/*宽*/
			height: 120rpx;/*高*/
			background-color: #b50e03;/* 背景色*/
			border-radius: 50%;/*圆弧*/
			margin: 10rpx auto;/*margin:距离外边框距离 auto:居中*/
			line-height: 120rpx;/*line-height:行高*/
			color: #fff;/*color:颜色 */
		}
		text{
			font-size: 30rpx;
		}
	}
}

更改图标大小可以在App.vue的全局css里面的.bilifont(我这里是这个)的font-size修改图标大小:

.bilifont{
	font-family:bilifont!important;
	font-size:16px;
	font-style:normal;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale
}

或者直接在scss里面直接一个一个改(建议)

.nav{...
	.nav_item{
    	...
		/*更改图标大小 */
		.master_home,
		.master_pindao,
		.master_watchUp,
		.master_fire{
			font-size: 50rpx;
        }
	}
}

这样，导航的基本结构就搞定了。
目前到本章最终效果:

下一篇