当前位置： 首页 > news >正文

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

news 来源：原创 2024/9/20 9:30:46

创建项目

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

相关文章：

  • 北京网站建设多少钱？
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • VulnHub靶机入门篇--Kioptrix4
  • scrapy爬取城市天气数据
  • 【Golang 面试 - 进阶题】每日 3 题（一）
  • WordPress原创插件：启用关闭经典编辑器和小工具
  • 力扣刷题----42. 接雨水
  • 【图像处理】不智能的目标识别
  • C语言 | Leetcode C语言题解之第279题完全平方数
  • 大型语言模型LLM的核心概念
  • 【数据结构】线性表与顺序表
  • Ubuntu22.04使用NVM安装多版本Node.js和版本切换
  • RedisTemplate、StringRedisTemplate、序列化器配置
  • Django REST Framework(十四)路由Routes
  • 二十四、【机器学习】【非监督学习】- 高斯混合模型 (Gaussian Mixture Models, GMM)
  • 深入理解 Redis 的使用与监控
  • 移动UI：排行榜单页面如何设计，从这五点入手，附示例。
  • [ JavaScript ] 数据结构与算法 —— 链表
  • const let
  • Fundebug计费标准解释：事件数是如何定义的？
  • iOS高仿微信项目、阴影圆角渐变色效果、卡片动画、波浪动画、路由框架等源码...
  • Java基本数据类型之Number
  • java中的hashCode
  • jdbc就是这么简单
  • js递归,无限分级树形折叠菜单
  • LeetCode算法系列_0891_子序列宽度之和
  • Python学习之路13-记分
  • React-Native - 收藏集 - 掘金
  • Spring Security中异常上抛机制及对于转型处理的一些感悟
  • 百度地图API标注+时间轴组件
  • 创建一个Struts2项目maven 方式
  • 基于 Babel 的 npm 包最小化设置
  • 全栈开发——Linux
  • 如何邀请好友注册您的网站(模拟百度网盘)
  • 三栏布局总结
  • 数据仓库的几种建模方法
  • 学习使用ExpressJS 4.0中的新Router
  • 中文输入法与React文本输入框的问题与解决方案
  • ​14：00面试，14：06就出来了，问的问题有点变态。。。
  • ​如何在iOS手机上查看应用日志
  • $L^p$ 调和函数恒为零
  • （02）Unity使用在线AI大模型（调用Python）
  • （13）DroneCAN 适配器节点（一）
  • （附源码）spring boot基于小程序酒店疫情系统 毕业设计 091931
  • （附源码）springboot车辆管理系统 毕业设计 031034
  • （附源码）springboot美食分享系统 毕业设计 612231
  • （附源码）ssm基于jsp的在线点餐系统 毕业设计 111016
  • （附源码）ssm捐赠救助系统 毕业设计 060945
  • （南京观海微电子）——COF介绍
  • (循环依赖问题)学习spring的第九天
  • （一）springboot2.7.6集成activit5.23.0之集成引擎
  • (译) 理解 Elixir 中的宏 Macro, 第四部分：深入化
  • (转)利用ant在Mac 下自动化打包签名Android程序
  • (转载)微软数据挖掘算法:Microsoft 时序算法(5)
  • (自适应手机端)响应式服装服饰外贸企业网站模板
  • .bat批处理（六）：替换字符串中匹配的子串
  • .gitignore文件---让git自动忽略指定文件