uniapp小视频项目：底部菜单栏编写、导航栏编写_uniapp开发h5的时候,像公共部分菜单栏这种怎么怎么实现呢,好像没有像vue里那样搞r

1、新建 uni-app 项目

①新建 uni-app 项目 uniapp-video
②新建 follow.vue

③设置 tabbar
pages.json 增加代码

"tabBar": {
		"list": [{
				"pagePath": "pages/index/index",
				"text": "首页"
			},
			{
				"pagePath": "pages/follow/follow",
				"text": "关注"
			}
		]
	}
1
2
3
4
5
6
7
8
9
10
11

④隐藏tabbar
App.vue onLaunch 中增加

uni.hideTabBar({
})
1
2

⑤隐藏导航栏
pages.json globalStyle 中增加

"navigationStyle":"custom"
1

2、增加底部导航组件

①创建 components 文件夹，创建 tab.vue

<template>
	<view class="tab">
		<view class="tab-box">
			首页
		</view>

		<view class="tab-box">
			关注
		</view>

		<view class="tab-box">
			加号
		</view>

		<view class="tab-box">
			消息
		</view>

		<view class="tab-box">
			我的
		</view>
	</view>
</template>

<script>
	export default {
		name: "tab",
		data() {
			return {

			};
		}
	}
</script>

<style>
.tab{
	width: 100%;
	height: 50px;
	position: fixed;
	bottom: 0;
	left: 0;
}
.tab-box{
	float: left;
	width: 20%;
	height: 50px;
	line-height: 50px;
	text-align: center;
	background: #000000;
	color: #ffffff;
	font-size: 20px;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

②index.vue 引入 tab.vue 并使用

<template>
	<view class="content">
		<tab></tab>
	</view>
</template>

<script>
	import tab from '../../components/tab.vue'
	export default {
		components:{
			tab
		},
		data() {
			return {
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

3、使用iconfont

①打开iconfont，搜索相应图片加入购物车，添加新项目，并把这些图片加入项目中

②然后将图片下载到本地

③复制代码（如果没有就生成下）

④将刚才复制的代码放到压缩包中的 iconfont 中，替换掉 @font-face 这一部分，//at 前需要加 https:

⑤把 iconfont.css 中的内容全部放到 App.vue 中的 style 标签内

⑥使用加号图标

<view class="iconfont icon-jiahao tab-box">
</view>
1
2

查看效果

⑦加号增加白色背景

<view class="tab-box">
	<view class="iconfont icon-jiahao icon-box">
	</view>
</view>

.icon-box{
	background: #ffffff;
	color: #000000;
	width: 60%;
	height: 30px;
	line-height: 30px;
	margin: 10px 20%;
	font-size: 15px;
	border-radius: 5px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4、导航栏编写

①在 components 下新建 first-nav.vue 文件来编写导航栏

<template>
	<view class="firstNav">
		<view class="iconfont icon-xiangzuo icon"></view>
		<view class="middle">
			<view class="text">推荐</view>
			<view class="text">同城</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"first-nav",
		data() {
			return {
				
			};
		}
	}
</script>

<style>
.firstNav{
	width: 100%;
	height: 35px;
	line-height: 35px;
	position: fixed;
	top: 25px;
	left: 0;
	background: #000000;
	margin: 0 auto;
}
.icon{
	position: absolute;
	left: 0;
	top: 0;
	color: #ffffff;
	width: 20%;
	text-align: center;
	font-size: 20px;
}
.middle{
	text-align: center;
}
.text{
	display: inline;
	color: #FFFFFF;
	margin: 0 10px;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

②导入 index.vue，步骤同上一节 tab.vue

<template>
	<view class="content">
		<firstNav></firstNav>
		<tab></tab>
	</view>
</template>

<script>
	import tab from '../../components/tab.vue'
	import firstNav from '../../components/first-nav.vue'
	export default {
		components:{
			tab,
			firstNav
		},
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32