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

创建项目

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/1488223.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

ChatGPT的原理和成本

ChatGPT就是人机交互的一个底层系统&#xff0c;某种程度上可以类比于操作系统。在这个操作系统上&#xff0c;人与AI之间的交互用的是人的语言&#xff0c;不再是冷冰冰的机器语言&#xff0c;或者高级机器语言&#xff0c;当然&#xff0c;在未来的十来年内&#xff0c;机器语…

Origin多个图层的层叠顺序调整

如果你有多个图层在一个图表中&#xff0c;可以在右上方的对象管理器中调整它们之间的层级关系—— 在对象管理器中处于第一位的图层&#xff0c;是层级最低的图层&#xff0c;即处于图表的最次优先显示&#xff1b;反之&#xff0c;处于最后一位的图层&#xff0c;是层级最高…

LeetCode 热题 HOT 100 (011/100)【宇宙最简单版】

【图论】No. 0200 岛屿数量 【中等】&#x1f449;力扣对应题目指路 希望对你有帮助呀&#xff01;&#xff01;&#x1f49c;&#x1f49c; 如有更好理解的思路&#xff0c;欢迎大家留言补充 ~ 一起加油叭 &#x1f4a6; 欢迎关注、订阅专栏 【力扣详解】谢谢你的支持&#xf…

C语言 | Leetcode C语言题解之第279题完全平方数

题目&#xff1a; 题解&#xff1a; // 判断是否为完全平方数 bool isPerfectSquare(int x) {int y sqrt(x);return y * y x; }// 判断是否能表示为 4^k*(8m7) bool checkAnswer4(int x) {while (x % 4 0) {x / 4;}return x % 8 7; }int numSquares(int n) {if (isPerfect…

本宫欢喜新荣记香港:米其林美学月子餐鉴赏和疗愈月子护理之旅

作为大湾区新晋“顶流”母婴护理中心和待产月子大健康解决方案提供者&#xff0c;已具备16年母婴月子专业护理经验的本宫欢喜&#xff0c;近两年备受国内和亚太备孕、待产妈妈群体和家庭珍爱。今年7月下旬&#xff0c;本宫欢喜大湾区百万影响力KOL妈妈系列体验之旅中&#xff0…

【数据结构】搜索二叉树

二叉搜索树 二叉树的博客 在之前的数据结构的文章中已经基本对二叉树有一定的了解&#xff0c;二叉搜索树也是一种数据结构&#xff0c;下面将对二叉搜索树进行讲解。 二叉搜索树的概念 二叉搜索树又称为二叉排序树&#xff0c;它或者是一棵空树&#xff0c;或者是具有下面性…

ICIP-2020-A Non-local Mean Temporal Filter for VideoCompression

在 libvpx、VP8、VP9 和 HEVC 等各种编码器实现中&#xff0c;早就发现在预处理阶段过程中从源视频信号去除噪声对客观压缩效率的提升存在好处。通常使用常规的块匹配运动搜索来构建运动轨迹&#xff0c;并沿着轨迹比较每对像素&#xff0c;根据像素间的差异确定时域滤波器系数…

网络原理_初识

目录 一、局域网LAN 二、广域网WAN 三、网络通信基础 3.1 IP地址 3.2 端口号 3.3 协议 3.4 五元组 3.5 OSI七层模型 3.6 TCP/IP五层模型 3.7 网络设备所在分层 3.8 封装和分用 总结 一、局域网LAN 局域网&#xff0c;即 Local Area Network&#xff0c;Local 即标…

Godot游戏制作 05收集物品

创建新场景&#xff0c;添加Area2D节点&#xff0c;AnimatedSprite2D节点 &#xff0c;CollisionShape2D节点 添加硬币 按F键居中&#xff0c;放大视图。设置动画速度设为10FPS&#xff0c;加载后自动播放&#xff0c;动画循环 碰撞形状设为圆形&#xff0c;修改Area2D节点为Co…

看2024如何利用IT项目管理软件实现项目稳定输出,创造价值

曾经做为一个在大型互联网公司工作了10年的项目实施工作人员来讲&#xff0c;亲眼见证了IT项目管理软件的兴起和发展&#xff0c;也深刻体会到它在提升项目效率和管理水平方面的巨大价值。它就像一把神奇的钥匙&#xff0c;打开了项目管理的新世界&#xff0c;让原本混乱无序的…

docer笔记3

docker笔记3 容器基本命令 容器基本命令 下载镜像 docker pull cento新建容器并启动 docker run [可选参数] image# 参数说明 --name“Name” 容器名字 tomcat01 tomcat02 用来区分容器 -d 后台方式运行 -it 使用交互方式运行&#xff0c;进入容器查…

leetcode3098. 求出所有子序列的能量和

官解 class Solution(object):# 定义常量mod int(1e9 7) # 模数&#xff0c;用于防止结果溢出inf float(inf) # 无穷大&#xff0c;用于初始化时的特殊值def sumOfPowers(self, nums, k):n len(nums) # 数组长度res 0 # 用于存储最终结果# 三维动态规划表&#xff0c;…

七、SpringBoot日志

1. 得到日志对象 import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; //打印日志…

【C语言】数组栈的实现

栈的概念及结构 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端 称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出LIFO&#xff08;Last In First Out&#xff09;的原则。 压栈&#…

springboot校园跑腿服务系统-计算机毕业设计源码15157

摘要 本文介绍了一种基于Springboot和uniapp的校园跑腿服务系统的设计与实现。该系统旨在为大学校园提供一种方便快捷的跑腿服务&#xff0c;满足学生和教职员工的日常需求。首先&#xff0c;系统采用了Springboot作为后端框架&#xff0c;利用其轻量级、高效的特性&#xff0c…

学习笔记 韩顺平 零基础30天学会Java(2024.7.22)

P407 接口使用细节2 P407 接口课堂练习 对于最后一个的输出&#xff1a;B因为实现了A的接口&#xff0c;所以和继承一样&#xff0c;B可以访问A的变量 P409 接口VS继承 接口对单继承机制&#xff08;是指只能继承一个类&#xff09;进行了补充 也可以理解为&#xff0c;子类通过…

请你谈谈:针对Mybatis引出的Spring事务的探究2:spring事务的失效

Spring事务失效的常见场景主要包括以下几个方面&#xff0c;这些场景通常是由于对Spring事务管理机制的误解或不当使用所导致的&#xff1a; 方法访问级别不当&#xff1a; 如前所述&#xff0c;Spring AOP默认不会拦截非public方法。因此&#xff0c;如果Transactional注解被…

通信原理-实验六:实验测验

实验六 实验测验 一&#xff1a;测验内容和要求 测试需要完成以下几个步骤&#xff1a; 配置好以下网络图&#xff1b;占总分10%&#xff08;缺少一个扣一分&#xff09;根据下面图配置好对应的IP和网关以及路由等相关配置&#xff0c;保证设备之间连通正常&#xff1b;占总…

《AIGC 实战宝典》(2024版) 正式发布!

2024 新年伊始&#xff0c;OpenAI 推出文生视频 Sora&#xff0c;风靡整个科技圈。 最近又发布了 ChatGPT-4o&#xff0c;这是一个全新模型&#xff0c;不仅能处理文本&#xff0c;还能实时理解和生成音频和图像。OpenAI 用实际行动给全世界的科技公司又上了一课。 如何从0到1…

C++(week14): C++提高:(一)面向对象设计:设计原则、设计模式

文章目录 一、面向对象设计的概念4.统一建模语言&#xff1a;UML语言StartUML 二、类与类之间的关系0.总结1.继承 (泛化耦合)2.组合 (Composition)3.聚合 (Aggregation)4.关联(1)双向关联(2)单向关联 5.依赖 (Dependency) 三、面向对象设计的原则0.总结1.单一职责原则 (Single …