uniapp开发精选短视频视频小程序实战笔记20240725,实现顶部轮播图和热门短剧

发布于:2024-07-25 ⋅ 阅读:(103) ⋅ 点赞:(0)

创建项目

创建项目,叫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