uni-app项目保姆级教程—三端在线教育类App

---

项目前期准备和初始化可以看这篇

1.使用iconfont图标库的方法

https://www.iconfont.cn/
登录后在这里搜索想要的图标

点击加入购物车

添加项目名称

下载到本地

解压到本地，我们只需要css文件和ttf文件，复制到项目static/icon里面

修改iconfont.css文件，加上目录

//iconfont.css
@font-face {
  font-family: "iconfont"; /* Project id 4353638 */
  src:url('~@static/icon/iconfont.ttf?t=1701349059467') format('truetype');
}

在App.vue组件引入iconfont.css文件

//App.vue
<style>
	/*每个页面公共css */
	@improt url("~@/static/icon/iconfont.css;")
</style>

在index.vue首页添加

2.进行pages.json全局基本配置

打卡uniapp官网 找到全局文件 查看属性

将项目中pages.json文件里globalStyle的系统默认属性删除

globalStyle里主要是导航栏和状态栏的背景颜色/导航栏标题颜色及状态栏前景颜色/以及下拉显示出来的窗口的背景色三个属性,注意属性值加双引号

		//导航栏背景颜色（同状态栏背景色）
		"navigationBarBackgroundColor":"#FFFFFF",
		//导航栏标题颜色及状态栏前景颜色，仅支持 black/white
		"navigationBarTextStyle":"black",
		//下拉显示出来的窗口的背景色
		"backgroundColor":"#F8F9FB"

运行到微信开发者工具查看效果

3.实现底部标签页菜单和header头部

• 在pages目录中新建category目录，再新建一个vue文件，简便做法可以在pages右键点击‘新建目录’输入文件名，这样目录和vue文件就同时创建了，pages.json中的路径也同时设置好了，用此法创建以下五个目录和文件
  
• 配置tabBar属性
  
  从iconfont图标库下载需要的图标放于static文件夹下tab目录里
  

	//标签栏
	"tabBar": {
		"color": "#b0abb33",
		"selectedColor": "#345DC2",
		"list": [{
			"pagePath":"pages/index/index",
			"iconPath": "static/tab/index.png",
			"selectedIconPath": "static/tab/index-active.png",
			"text":"首页"
		},
		{
			"pagePath":"pages/category/category",
			"iconPath": "static/tab/category.png",
			"selectedIconPath": "static/tab/category-active.png",
			"text":"分类"
		},
		{
			"pagePath":"pages/article/article",
			"iconPath": "static/tab/article.png",
			"selectedIconPath": "static/tab/article-active.png",
			"text":"阅读"
		},
		{
			"pagePath":"pages/question/question",
			"iconPath": "static/tab/question.png",
			"selectedIconPath": "static/tab/question-active.png",
			"text":"问答"
		},
		{
			"pagePath":"pages/my/my",
			"iconPath": "static/tab/my.png",
			"selectedIconPath": "static/tab/my-active.png",
			"text":"我的"
		}]
	},

运行到微信开发者工具查看效果，当前页面的图标为蓝色 其他页面为灰色

4.基于swiper组件实现轮播图

新建banner组件

//components/common/banner.vue
<template>
	<view class="banner-box">
		轮播图
	</view>
</template>

在index/index.vue导入banner组件并注册

//pages/index/index.vue
<template>
	<view class="index-box">
		<!-- 轮播图组件 -->
		<banner></banner>
	</view>
</template>

<script>
	import banner from '@/components/common/banner.vue'
	export default {
		components:{banner},

此时轮播图组件已经显示出来了

在swiper组件内放入图片

//component/common/banner.vue
<template>
	<view class="banner-box">
		<swiper>
			<swiper-item>
				<image src="/static/images/it01.png"></image>
			</swiper-item>
			<swiper-item>
				<image src="/static/images/it02.png"></image>
			</swiper-item>
			<swiper-item>
				<image src="/static/images/it03.png"></image>
			</swiper-item>
			<swiper-item>
				<image src="/static/images/it04.png"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

此时已经可以左右滑动

• 配置面板指示点、指示点颜色、 当前选中的指示点颜色、是否自动切换、自动切换时间间隔

		<swiper indicator-dots indicator-color="rgba(255, 255, 255, 0.5)" 
		indicator-active-color="#FFFFFF"
		autoplay interval="4000">

• 设置css样式
  先给swiper和swiper-item分别加一个类选择器

<style lang="scss">
	.banner-box {
		padding-top: 120rpx;
		.banner-bg {
			position: absolute;
			top: 0;
			width: 100%;
			height: 470rpx;
			background-image: linear-gradient(blue 10%, #FFF); //渐变色
			transform: .5s;
		}
		.banner-swiper {
			width: 100%;
			height: 350rpx;
			.swiper-item{
				width: 100%;
				height: 100%;
				padding: 0 30rpx;
				image {
					width: 100%;
					height: 100%;
					border-radius: 15rpx;
				}
			}
		}
	}
</style>