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

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

创始人

2024-11-27 20:34:53

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

此时页面效果如下：
在这里插入图片描述

开发首页顶部轮播图

修改pages/index/in

上一篇：发现玩家！wpk辅助器小程序（辅助器）东游麻将修改器（辅助挂）jj斗地主如何让系统发好牌

下一篇：我去，怎么http全变https了