学习Uni-app开发小程序Day3

news2024/12/25 10:04:33
经过五一长假,回过头在去看学习的东西,发现仍然是一筹莫展的,看来,学习是不能松懈的,得,自己在把以前的从头复习一遍,加深印象。
  • 今天在继续听课,但是出现一个问题,是黑码的视频讲解有点快,而且使用的工具变更成vscode了,不是说这个工具不好,只是课程的前提是要会开发小程序或者是vue使用的,但是对小白的我来说,是有点费劲,所以只能是在找找,看有没有合适自己的学习课程,最终,在bilibili中,找到一个课程,讲解的方式是根据uni-app的文档,前期讲解常用的组件等,进一步学习。(bilibili中搜索咸虾米,零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战)
  • 今天根据视频,学习了几个常用的组件,这里记录下
    1、view和text,这里的view是和div相同,都是在template中添加,这里主要是讲解了view中嵌套view,
    在这里插入图片描述
    这是添加了两个view,定义一个class,在style中进行样式设定,根据文档中的属性设置点击的效果等
    在这里插入图片描述
    这是在style中设置点击的效果和view的大小。
    text的使用,
    在这里插入图片描述
    这里的文字已经描述了,至于要连续选择,还未学到
    2、scroll-view
    这里可以理解成是android中的scroll,可以是上下滑动、左右滑动的,在这里插入图片描述
    这是纵向滑动的,在这里面,添加属性的时候,根据文档,例如:添加的scroll-y这个属性,是不用在添加值的
    如果要横向滑动,改动的地方多一些,
    第一步:将scroll-y更改为scroll-x,
    第二步:给需要显示的子元素添加class
    在这里插入图片描述
    第三步:在style中设置横向滑动的样式
    在这里插入图片描述
    这里做个记录:
    border:这是边框样式,后面跟着是边框线的大小,solid:这是边框线的颜色
    white-space:是否合并、是否换行;怎么合并、怎么换行(这里小白不太懂,只是知道是在css中可以查看到,做个记录,后期继续添加学习css)
    display:子元素布局,要子元素是那种方式布局
    margin:边距,距离上下左右的边距,这里和android布局中的边距是相同的
    在这里,做一个单位的记录,常用的单位有:px(像素)、%(百分比)、vw(屏幕宽–这里是1-100选择,100就是自适应屏幕宽)、vh(屏幕高,自适应屏幕高)这里要记住,设置宽只能用vw,设置高智能用vh,不能换着用,虽然不报错,但是页面显示的布局是错乱了
    3、swiper滑块视图容器
    这里讲解了使用swiper,是在使用轮播的功能,可以是图片、文字等。
    在这里插入图片描述
    这里不做过多描述,在根据文档中的属性,自行理解,
    这里有个地方可以记录下:在style中设置样式的时候,可以设置当前组件,但是这里需要设置一个对应的属性名,还有一种情况,是直接设置组件的样式,例如:
    在这里插入图片描述
    这就是直接定义组件的样式,其中,子组件是要在父组件中定义的,而且,定义组件样式的时候,不需要再组件前面加点
    其中:swiper-item:nth-child(2n)这是当前轮播是倍数的时候,就修改背景颜色,至于为什么这么写,不清楚,只知其意不知其所以,还是需要加强css的学习

4、navigator,路由和页面跳转
在这里,是可以在这个组件中添加要跳转的页面,
在这里插入图片描述
例如上图所示,这里我才测试的时候发现,不能再这个页面添加tabbar的页面,不然跳转是不成功的,原因未知,希望后期可以将这个完善了。

5、button和input
这是常用的两个组件,button:是按钮,
在这里插入图片描述
这里简单的编写了常用的属性,其他属性在文档中存在,使用的时候可以查看
input:在uni-app中,只是一个输入框,其他的控件是有专门的api的,下面把input常用的属性编辑下,自己试试效果
在这里插入图片描述
这里在设置confirm-type的时候,要查看效果,要在手机上查看,在电脑上是没有效果的
好了,今天学习到此为止,还是需要记录,复习几次,方便加深印象。

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

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

相关文章

实践指南:如何将SpringBoot项目无缝部署到Tomcat服务器

序言 SpringBoot 是一个用来简化 Spring 应用初始搭建以及开发过程的框架,我们可以通过内置的 Tomcat 容器来轻松地运行我们的应用。但在生产环境中,我们可能需要将应用部署到独立的 Tomcat 服务器上。本文给大家介绍 SpringBoot 项目部署到独立 Tomcat…

Springboot+Vue项目-基于Java+MySQL的个人云盘管理系统(附源码+演示视频+LW)

大家好!我是程序猿老A,感谢您阅读本文,欢迎一键三连哦。 💞当前专栏:Java毕业设计 精彩专栏推荐👇🏻👇🏻👇🏻 🎀 Python毕业设计 &…

连接docker中的MySQL出现2058错误

出错场景:在虚拟机中用docker技术下载最新版本的MySQL,在本地电脑上连接发现出现2058错误。 解决方法: 按照以下步骤 1. 2. ALTER USER root% IDENTIFIED WITH mysql_native_password BY 自己MySQL的密码; 3.成功

如何查看公网IP开放端口?

在计算机网络中,公网IP是指能够直接访问互联网的IP地址,而开放端口则是指外部网络可以访问的服务端口。查看公网IP开放端口可以帮助我们了解当前网络环境中哪些服务可以被外部网络访问,对于网络安全和远程连接非常重要。 天联组网 天联组网是…

延迟加载过多对性能的影响

延迟加载是一种将资源下载操作推迟到需要时再下载的技术,可以节省流量并减少关键资源的网络争用。它于2019年成为 Web 标准,今天大多数主流浏览器支持图片的 loading"lazy"。 听起来不错,但是否存在延迟加载过多的情况?…

Sarcasm detection论文解析 |使用 BERT 进行中间任务迁移学习的刺检测

论文地址 论文地址:https://www.mdpi.com/2227-7390/10/5/844#/ github:edosavini/TransferBertSarcasm (github.com) 论文首页 笔记框架 使用 BERT 进行中间任务迁移学习的讽刺检测 📅出版年份:2022 📖出版期刊:Mathematics &…

您可以使用WordPress创建的19种网站类型

当人们决定为什么他们应该使用WordPress时,我们经常会被问到“WordPress可以做[空白]吗?答案大多是肯定的。在本文中,我们将向您展示您可以使用WordPress创建的19种不同类型的网站,而无需学习任何编程技巧。 目录 隐藏 1 开始使用…

什么是Facebook付费广告营销?

Facebook作为全球最大的社交平台之一,成为了跨境卖家不可或缺的营销阵地。它不仅拥有庞大的用户基数,还提供了丰富的广告工具和社群互动功能,让商家能够精准触达目标市场,提升品牌影响力。云衔科技通过Facebook付费广告营销的专业…

开源免费的发票识别OCR应用:Invoice

Invoice:轻松识别,发票电子化扫描烦恼消- 精选真开源,释放新价值。 概览 Invoice 是github社区上一个采用开源许可协议发布的增值税发票光学字符识别(OCR)解决方案项目。该项目不仅集成了预训练的高级模型&#xff0c…

ansible批量运维管理

Ansible是一种自动化运维工具,基于Python开发,主要用于自动化IT任务,如配置管理、应用程序部署、软件升级和系统管理等。它集合了众多运维工具(如puppet、cfengine、chef、func、fabric)的优点,实现了批量系…

CopyClip for Mac - 高效复制粘贴,轻松管理剪贴板

CopyClip for Mac,一款专为Mac用户打造的剪贴板管理工具,让你在复制粘贴的日常任务中,享受到前所未有的高效与便捷。 它常驻在菜单栏中,时刻准备为你服务。一旦你复制了内容,CopyClip就会自动将其保存至历史记录中&…

软件杯 深度学习花卉识别 - python 机器视觉 opencv

文章目录 0 前言1 项目背景2 花卉识别的基本原理3 算法实现3.1 预处理3.2 特征提取和选择3.3 分类器设计和决策3.4 卷积神经网络基本原理 4 算法实现4.1 花卉图像数据4.2 模块组成 5 项目执行结果6 最后 0 前言 🔥 优质竞赛项目系列,今天要分享的是 &a…

为软件教学文档增加实践能力

为了更方便软件教学,我们在凌鲨(OpenLinkSaas)上增加了公共资源引用的功能。 目前可以被引用的公共资源: 微应用常用软件公共知识库Docker模板 引用公共资源 引用微应用 目前微应用包含了主流数据库,终端等工具,可以方便的进行各种相关实…

词袋法TFIDF

Tf-idf⽂本特征提取 TF-IDF的主要思想是:如果某个词或短语在⼀篇⽂章中出现的概率⾼,并且在其他⽂章中很少出现,则认为此词或者短语具有很好的类别区分能⼒,适合⽤来分类。TF-IDF作⽤:⽤以评估⼀字词对于⼀个⽂件集或…

制冷机组喷液冷却与经济器的介绍

在制冷机组中,喷液冷却与经济器两者虽同可以为提升制冷系统效率与性能,经济器是一种特殊的换热器,主要用于制冷系统中,以提高系统的效率和性能。通常安装在制冷机组的冷凝器之后、膨胀阀之前的位置,确保在制冷剂流向蒸…

自动驾驶主流芯片及平台架构(五)选择自动驾驶平台考虑因素

自动驾驶域控制器基本架构 域控制其中最核心的是主芯片,一般会采用一颗或多颗高性能的SOC。SOC是System on Chip的缩写,就是在单块芯片上集成多个微处理器、模拟IP核、数字IP核和存储器等部件,比如CPU、GPU、DSP、ISP、Codec、NPU、Modem等模…

等保测评二级有哪些标准

等级保护测评(等保测评)是中国的一项网络安全标准,旨在评估和确保关键信息基础设施的安全。二级等保测评是适用于一般级别的信息系统,这些系统一旦受损,可能会对社会秩序、公共利益和公民权利造成一定程度的影响。 二级…

Flask-HTTP请求、响应、上下文、进阶实验

本节主要目录如下: 一、请求响应循环 二、HTTP请求 2.1、请求报文 2.2、Request对象 2.3、在Flask中处理请求 2.4、请求钩子 三、HTTP响应 3.1、响应报文 3.2、在Flask中生成响应 3.3、响应格式 3.4、Cookie 3.5、session:安全的Cookie 四、…

使用.NET8实现Web API

目录 1、环境准备1.1、从官网下载及安装VS2022社区版1.2、下载及安装asp.net core的运行时及IIS Module 2、WebAPI工程创建2.2 推荐的库2.2.1 数据库篇2.2.1.1、 SQLSugar2.2.1.2、 OracleAccess 2.2.2、IOC篇2.2.2.1、autofac2.2.2.2、 2.2.3、日志记录篇2.2.3.1 log4net2.2.3…

考情管理之签到和签退

前端 菜单权限 只给超级管理员分配签到管理菜单&#xff0c;一般员工无法查看 查找首页页面 观察到首页有个“使用率”汉字 在项目中查找“使用率”这三个字 增加签到和签退按钮 页面代码 <div class"info-box"><span class"info-box-icon bg-a…