{"tabBar": { // 在pages.json中添加上tabBar配置，如下"list": [{"pagePath":"pages/index/index"},{"pagePath":"pages/follow/follow"},{"pagePath":"pages/friend/friend"},{"pagePath":"pages/news/news"},{"pagePath":"pages/personal/personal"}]}
}
// App.vue中onLaunch的时候隐藏掉uni-app自带的tabBar<script>export default {setTimeout(() => {uni.hideTabBar(); // 隐藏tabBar}, 1000);}
</script>

// 项目根目录下新建一个components目录，并在其中新建一个tab-bar.vue即自定义底部导航栏组件
<template><view class="tab"><navigator open-type="switchTab" url="/pages/index/index" class="tab-box">首页</navigator><navigator open-type="switchTab" url="/pages/follow/follow" class="tab-box">关注</navigator><view class="tab-box">+ <!--暂时用加号代替，后面会替换成字体图标--></view><navigator open-type="switchTab" url="/pages/news/news" class="tab-box">消息</navigator><navigator open-type="switchTab" url="/pages/personal/personal" class="tab-box">我</navigator></view>
</template><style>
.tab{height:50px;width:100%;position:fixed;bottom: 0;left: 0;z-index: 20;
}
.tab-box{float: left;width: 20%;color: #FFFFFF;text-align: center;height: 50px;line-height: 50px;font-size:20px
}
.icon-box{width: 60%;height: 30px;background: #FFFFFF;color: #000000;margin: 10px 20%;line-height:30px;border-radius: 5px;font-size: 15px;
}
</style>

// App.vue<style>/*每个页面公共css */@import url("./static/iconfont.css");
</style>
// components/tab-bar.vue<view class="tab-box"><view class="iconfont icon-jiahao icon-box" ><!--添加一个加号图标字体样式，注意是两个样式名哦--></view>
</view>

{"globalStyle": {"navigationStyle":"custom" // 设置头部导航栏为自定义模式，头部导航栏会自动消失}
}
// /components/index-header.vue<template><view class="index-header"><!--固定定位到首页顶部--><view class="iconfont icon-icon-- icon"></view> <!--绝对定位到左侧--><view class="middle"> <!--搜索图标绝对定位后，middle将会上移动到顶部，在搜索图标下面，里面内容居中显示即可--><view class="text">推荐</view>|<view class="text">同城</view><!--变成行内元素--></view></view>
</template><style scoped>
.index-header {height: 35px;line-height: 35px;width: 100%;position: fixed;top: 25px;left: 0;margin: 0 auto;background: #000000;z-index: 20;
}
.icon {position: absolute;left: 0;top: 0;color: white;width: 20%;text-align: center;
}
.middle {text-align: center;color: white;
}
.text {display: inline;margin: 0 10px;
}
</style>

// App.vuehtml,body {width: 100%;height: 100%;margin: 0;padding: 0;
}
// /components/video-player.vue<template><view class="video-player"><video class="video" :src= "video.src" :controls="false":loop="true"></video></view>
</template>
<script>export default {props: ["video"]}
</script>
<style>.video-player {width: 100%;height: 100%;}.video {width: 100%;height: 100%;z-index: 19;}
</style>

// /components/video-list.vue<template><view class="video-list"><view class="swiper-box"><swiper class="swiper" :vertical="true"><swiper-item v-for="(item,index) in videos" :key="index"><view class="swiper-item"><video-player                         :video="item"                        :index="index"></video-player></view></swiper-item></swiper></view></view>
</template><script>import VideoPlayer from "./video-player.vue";export default {components: {"video-player": VideoPlayer},props:['list'],data() {return {videos:[],}},watch:{            list(){                this.videos=this.list;            }        }}
</script><style scoped>.video-list {width: 100%;height: 100%;}.swiper-box{    height:100%;    width: 100%;}.swiper{    height:100%;    width: 100%;}.swiper-item {width: 100%;height: 100%;background: red;}
</style>

// pages/index/index.vue<template><view class="content"><index-header></index-header> <!--首页头部导航栏组件--><video-list :list="list"></video-list> <!--视频列表组件--><tab-bar></tab-bar> <!--首页底部导航栏组件--></view>
</template>
<script>import TabBar from "../../components/tab-bar.vue";import IndexHeader from "../../components/index-header.vue";import VideoList from "../../components/video-list.vue";export default {components: {"tab-bar": TabBar,"index-header": IndexHeader,"video-list": VideoList},data() {return {list: []}},onLoad() {this.getVideos();},methods: {getVideos() {const res = [{id: 0,src: "http://alimov2.a.yximgs.com/bs2/gdtPostRoll/postRoll-MTA3MDY0NDY3Mzk.mp4",autho: "张三",title: "仙娜美",loveNumber: 10000,commentNumber: 2000,shareNumber: 30000},{id: 1,src: "http://upmov.a.yximgs.com/upic/2019/02/13/22/BMjAxOTAyMTMyMjUxMTlfNDc4ODM2MzlfMTA3Mjc5ODU2MjhfMV8z_b_B1fbc185eaca8cc06efa2d4f713e13e8c.mp4",autho: "李四",title: "【搞笑】最强猜歌王",loveNumber: 40000,commentNumber: 5000,shareNumber: 60000},{id: 2,src: "http://bdmov.a.yximgs.com/bs2/gdtPostRoll/postRoll-MTA3MDk5Mjc5OTg.mp4",autho: "王五",title: "特制流泪芥末酱",loveNumber: 70000,commentNumber: 8000,shareNumber: 90000}];this.list = res;}}}
</script><style>.content {width: 100%;height: 100%;}
</style>