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.mzph.cn/diannao/51433.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

详细分析 Sql Server查询卡顿的排查方向

目录 前言1. 问题所示2. 原理分析2.1 缺乏索引2.2 表碎片2.3 查询计划缓存2.4 锁和阻塞 3. 总结 前言 本篇为理论知识的分析以及对症下药&#xff0c;前阵子发生过Bug&#xff0c;后通过迁移服务器以及数据库最终才解决问题&#xff0c;但是细想当时可能是因为碎片或者缓存的概…

WEBKIT 通过JavaScript 调用本地,硬件未来之窗OS硬件APP

以酒店为例我们需要调用shen份证读取&#xff0c;采集人脸&#xff0c;门锁写房卡&#xff0c;如何通过浏览器调用 1.通过本地http服务 2.通过webkit模式 这里说政务单位模式的集成 由于篇幅问题&#xff0c;怎么集成webkit就不说了 一、webkkit加载交互本地代码 browser.…

23、Python之面向对象:实例属性、类属性,傻傻分不清楚

引言 在上一篇文章中&#xff0c;我们初步介绍了Python面向对象中类定义的语法&#xff0c;顺带介绍了关于面向对象的系统工程中&#xff0c;所涉及的OOA与OOD。 其实&#xff0c;简单来说&#xff0c;类的定义其实就是面向对象的“封装”特性的体现。我们将分析、设计得到的…

BLE自适应跳频算法详解

前言 &#xff08;1&#xff09;自适应跳频算法是相当的简单&#xff0c;小学生都能够看懂&#xff0c;而且网上已经有相当多的关于自适应跳频算法的介绍。既然如此&#xff0c;为什么我还要写这样一篇博客呢&#xff1f; &#xff08;2&#xff09;原因很简单&#xff0c;我发…

内网横向——利用WMI进行内网横向

文章目录 一、WMI介绍二、常规利用方法三、常见利用工具3.1 wmiexec3.2 Invoke-WmiCommand 四、WMI事件订阅的利用4.1 手动实现4.2 Sharp-WMIEvent 网络拓扑&#xff1a; 攻击机kali IP&#xff1a;192.168.111.0 跳板机win7 IP&#xff1a;192.168.111.128&#xff0c;192.168…

业务记录:处理动态表头的CSV/EXCEL文件

业务描述&#xff1a;传入一个动态表头的CSV文件&#xff0c;解析CSV&#xff0c;并保存入库。 CSV文件的表头是不确定的&#xff0c;即顺序和字段个数不确定&#xff0c;以及表头是中文字段。 例如&#xff1a; 为了顺利解析CSV文件&#xff0c;前端需要传入对应的字段名和顺…

axure制作切换栏--动态面板的应用

先看下效果&#xff1a;点击上面的切换栏 切换到西游记栏目&#xff1a; 切换到水浒传栏目&#xff1a; 上述两个图片比对可以发现&#xff0c;在点击切换栏的时候&#xff0c;里面的内容以及切换栏的下面蓝色横线也会发生对应的变化。这里涉及到两个地方的变化&#xff0c;就…

Golang 知识结构图

总结Go的入门知识结构&#xff0c;如下图所示&#xff1a;

图形/视图结构的三个坐标系

图形/视图结构的三个坐标系分别为视图结构系物理结构系&#xff0c;场景坐标系&#xff0c;图形项坐标系。 本文记录实践三个坐标系及视图与场景坐标转换&#xff0c;通过事件槽来显示出来的过程。 自定义1个View视图组件&#xff0c;其中扩展了鼠标点击、鼠标移动的事件&…

Golang | Leetcode Golang题解之第297题二叉树的序列化与反序列化

题目&#xff1a; 题解&#xff1a; type Codec struct{}func Constructor() (_ Codec) {return }func (c Codec) serialize(root *TreeNode) string {if root nil {return "X"}left : "(" c.serialize(root.Left) ")"right : "("…

前端渲染模式

渲染的概念 在Web开发中&#xff0c;渲染&#xff08;Rendering&#xff09;是一个核心概念&#xff0c;指的是将应用程序的数据&#xff08;data&#xff09;与模板&#xff08;template&#xff09;结合&#xff0c;生成最终的HTML页面&#xff0c;这个页面随后会被浏览器解析…

主宰生物进化的 “魔咒” —— 制约生物在特殊环境下进化方式的线索

一些神秘的法则制约着生物在特殊环境下的进化方式。它们还为动物将如何适应气候变暖提供了线索。 一些奇特的进化现象 一艘装满大象和老鼠的 “诺亚方舟” 搁浅在一座偏远的小岛上。动物们都幸存下来并繁衍后代。但是&#xff0c;随着世代相传&#xff0c;奇怪的事情发生了&a…

【基础篇】Docker 概览 ONE

嗨&#xff0c;大家好&#xff01;我是小竹笋&#xff0c;一名热爱创作的工程师。今天我将带领大家一起踏上探索 Docker 的奇妙之旅。我们先从 Docker 的历史和发展说起&#xff0c;然后再看看 Docker 和虚拟机之间的区别&#xff0c;最后了解一下 Docker 在各行各业的应用情况…

环境配置—批量删除时提示/usr/bin/rm: Argument list too long问题

文章目录 1. 背景介绍2. 问题原因3. 解决方案3.1 分批删除文件3.2 使用 find 命令直接删除3.3 增加系统参数限制3.4 使用循环删除 4. 结论 1. 背景介绍 在Linux系统中&#xff0c;rm 命令是删除文件和目录的常用工具。然而&#xff0c;当需要删除大量文件时&#xff0c;可能会…

【论文10】复现代码tips

一、准备工作 1.创建一个虚拟环境 conda create --name drgcnn38 python=3.8.18 2.激活虚拟环境 conda activate drgcnn38 注意事项 在Pycharm中终端(terminal)显示PS而不是虚拟环境base 问题如下所示 解决方法:shell路径改成cmd.exe 重启终端显示虚拟环境 3.安装torch …

Kafka知识总结(事务+数据存储+请求模型+常见场景)

文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 事务 事务Producer保证消息写入分区的原子性&#xff0c;即这批消…

国内本地化OCSP服务的SSL证书:提升安全与效率的新选择

在数字化时代&#xff0c;网络安全成为企业运营和用户体验的重要基石。HTTPS&#xff08;Hypertext Transfer Protocol Secure&#xff09;作为一种安全的网络协议&#xff0c;通过SSL&#xff08;Secure Sockets Layer&#xff09;加密技术&#xff0c;保障了数据传输的机密性…

MATLAB基础应用精讲-【数模应用】Poisson 回归分析(附R语言代码实现)

目录 前言 知识储备 基于泊松回归、负二项回归模型 数据分布介绍 模型介绍 模型的选择 案例介绍 算法原理 泊松回归 数学模型 适用条件 参数估计与假设检验 SPSSAU Poisson 回归案例 1、背景 2、理论 3、操作 4、SPSSAU输出结果 5、文字分析 6、剖析 疑难解…

OpenSSL SSL_connect: Connection was reset in connection to github.com:443

OpenSSL SSL_connect: Connection was reset in connection to github.com:443 目录 OpenSSL SSL_connect: Connection was reset in connection to github.com:443 【常见模块错误】 【解决方案】 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&…

kuberneter管理GUI工具Lens

从github上可以知道&#xff0c;lens的前端是用electron做的客户端工具&#xff0c;打开安装路径你会发现kubectl.exe,没错&#xff0c;就是你经常用的kubectl命令行的客户端工具。kubectl本来就能输出json的数据类型&#xff0c;集成前端更方便了。看到这里你是不是发现&#…