文章目录

1、新建 uni-app 项目

①新建 uni-app 项目 uniapp-video
②新建 follow.vue
uniapp小视频项目:底部菜单栏编写、导航栏编写_导航栏
③设置 tabbar
pages.json 增加代码

"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/follow/follow",
"text": "关注"
}
]
}

④隐藏tabbar
App.vue onLaunch 中增加

uni.hideTabBar({
})

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

"navigationStyle":"custom"

2、增加底部导航组件

uniapp小视频项目:底部菜单栏编写、导航栏编写_导航栏_02
①创建 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>

②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>

3、使用iconfont

①打开​​iconfont​​​,搜索相应图片加入购物车,添加新项目,并把这些图片加入项目中
uniapp小视频项目:底部菜单栏编写、导航栏编写_ico_03
②然后将图片下载到本地
uniapp小视频项目:底部菜单栏编写、导航栏编写_导航栏_04
③复制代码(如果没有就生成下)
uniapp小视频项目:底部菜单栏编写、导航栏编写_导航栏_05
④将刚才复制的代码放到压缩包中的 iconfont 中,替换掉 @font-face 这一部分,//at 前需要加 https:
uniapp小视频项目:底部菜单栏编写、导航栏编写_ico_06
⑤把 iconfont.css 中的内容全部放到 App.vue 中的 style 标签内
uniapp小视频项目:底部菜单栏编写、导航栏编写_uni-app_07
⑥使用加号图标

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

查看效果
uniapp小视频项目:底部菜单栏编写、导航栏编写_ico_08
⑦加号增加白色背景

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

4、导航栏编写

uniapp小视频项目:底部菜单栏编写、导航栏编写_ico_09

①在 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>

②导入 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>