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.…

百日筑基第三十四天-JAVA中的强/软/弱/虚引用

百日筑基第三十四天-JAVA中的强/软/弱/虚引用 Java对象的引用被划分为4种级别&#xff0c;分别为强引用、软引用、弱引用以及虚引用。帮助程序更加灵活地控制对象的生命周期和JVM进行垃圾回收。 强引用 强引用是最普遍的引用&#xff0c;一般把一个对象赋给一个引用变量&…

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;前端需要传入对应的字段名和顺…

.NET Core 命令大全

目录 1. 基本命令 2. 项目管理命令 3. 测试和调试命令 4. 包管理命令 5. 工具和扩展命令 结语 .NET Core 是一个跨平台、开源的开发平台&#xff0c;用于构建各种应用程序。为了方便开发者进行操作&#xff0c;.NET Core 提供了一系列的命令行工具。这篇文章将详细介绍这…

如何将anaconda的根环境复制到新环境

anaconda将根环境复制到新环境 在Anaconda中&#xff0c;您可以使用conda create命令来复制根环境到一个新的环境。以下是一个命令示例&#xff1a; conda create --name new_env --clone root 这里new_env是新环境的名字&#xff0c;您可以根据需要将其更改为您想要的名字。…

前端数据处理

数据处理 多字段&#xff08;数字类型&#xff09;排序 let arr [{name: jim, math: 85, english: 66, chinese: 36},{name: tom, math: 78, english: 70, chinese: 87},{name: lilei, math: 78, english: 89, chinese: 36},{name: alice, math: 90, english: 20, chinese: …

docker安装mysql遇到的问题

1、3306端口被占用 Error starting userland proxy: listen tcp4 0.0.0.0:3306: bind: address already https://blog.csdn.net/qq_42680327/article/details/136851627 2、mysql已经被占用 docker: Error response from daemon: Conflict. The container name “/mysql“ is…

使用SpringBoot集成Shardingjdbc介绍、应用场景和示例代码

概述 Spring Boot集成Sharding JDBC可以帮助实现MySQL数据库的分库分表操作&#xff0c;使得应用能够轻松处理大规模数据和高并发场景。Sharding JDBC通过透明的分库分表策略&#xff0c;将数据分布到多个数据库实例和数据表中&#xff0c;从而提高数据库的扩展性和性能。 应…

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

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

Golang 知识结构图

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

关于map的内存和时间复杂度内存占用

关于map的内存和时间复杂度&#xff08;map尽量别碰暴力遍历&#xff09; 内存占用&#xff1a; map中每个元素包含一个键和一个值。键和值的类型可以是任意可比较的数据类型。 内存占用取决于键和值的大小以及map中元素的数量。 对于固定大小的键和值类型&#xff0c;map的内…

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

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

详细介绍仿函数

仿函数&#xff08;Functor&#xff09;是C中的一种可调用对象&#xff08;Callable Object&#xff09;&#xff0c;也是一种重载了函数调用运算符&#xff08;operator()&#xff09;的类或结构体。 仿函数可以像函数一样被调用&#xff0c;可以带参数&#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 : "("…

路由学习属于OSI模型的哪一层

路由学习主要发生在OSI&#xff08;开放系统互连&#xff09;模型的第三层&#xff0c;即网络层。在OSI模型中&#xff0c;每一层都有其特定的功能和责任&#xff0c;而网络层的主要职责是管理网络中的数据通信&#xff0c;包括数据包的转发和路由选择。 具体来说&#xff0c;…

前端渲染模式

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