创建项目
创建项目，叫video_app。
在pages.json里面修改一下标题：
新建search搜索页面和me我的页面。
此时界面预览效果如下：
引入静态资源
主要是static里面的内容，全部复制过来。
配置底部导航栏
pages.json，放到顶层，和全部样式同级：
"tabBar": {
"color": "#bfbfbf",
"selectedColor": "#515151",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/tabBarIco/index.png",
"selectedIconPath": "static/tabBarIco/index_sel.png"
},
{
"pagePath": "pages/search/search",
"text": "搜索",
"iconPath": "static/tabBarIco/search.png",
"selectedIconPath": "static/tabBarIco/search_sel.png"
},
{
"pagePath": "pages/me/me",
"text": "我的",
"iconPath": "static/tabBarIco/me.png",
"selectedIconPath": "static/tabBarIco/me_sel.png"
}
]
}
此时重启服务，重新预览，可以发现底部导航已经出来了。
开发首页
先在App.vue里面编写一个全局样式。
.page{
width: 100%;
height: 100%;
background-color: #f7f7f7;
position: absolute;
}
修改 pages/index/index.vue
<script setup>
</script>
<template>
<view class="page">
首页
</view>
</template>
<style scoped>
</style>
此时页面效果如下：
开发首页顶部轮播图
修改pages/index/in
