学习Uni-app开发小程序Day3

经过五一长假,回过头在去看学习的东西,发现仍然是一筹莫展的,看来,学习是不能松懈的,得,自己在把以前的从头复习一遍,加深印象。
  • 今天在继续听课,但是出现一个问题,是黑码的视频讲解有点快,而且使用的工具变更成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.mfbz.cn/a/605792.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

大家都是怎么写毕业论文的? 推荐4个AI工具

写作这件事一直让我们从小学时期就开始头痛,初高中时期800字的作文让我们焦头烂额,一篇作文里用尽了口水话,拼拼凑凑才勉强完成。 大学时期以为可以轻松顺利毕业,结果毕业前的最后一道坎拦住我们的是毕业论文,这玩意不…

FMEA如何在设计活动中有效应用?——FMEA软件

免费试用FMEA软件-免费版-SunFMEA 在现代产品设计和开发过程中,FMEA(失效模式与影响分析)已经成为了一种不可或缺的工具。它的核心目标是在产品或过程设计的早期阶段,通过识别和分析潜在的失效模式,预防和控制可能出现…

汽车软件研发工具链丨怿星科技新产品重磅发布

“创新引领未来”聚焦汽车软件新基建,4月27日下午,怿星科技2024新产品发布会在北京圆满举行!智能汽车领域的企业代表、知名大企业负责人、投资机构代表、研究机构代表齐聚现场,线上直播同步开启,共同见证怿星科技从单点…

用一只小猪来解释 On-Prem, IaaS, PaaS 和 SaaS 的区别

亚马逊云科技首席布道师 Jeff Barr 在推上发过一张图,用一只小猪🐷讲清了 On-Prem, IaaS, PaaS 和 SaaS 的区别。 虽然历史悠久,但图片内容一点也没有过时。 On-prem 本地部署 本地部署(on-prem, 或 on-premise)指将…

qwfgjk

c语言中的小小白-CSDN博客c语言中的小小白关注算法,c,c语言,贪心算法,链表,mysql,动态规划,后端,线性回归,数据结构,排序算法领域.https://blog.csdn.net/bhbcdxb123?spm1001.2014.3001.5343 给大家分享一句我很喜欢我话: 知不足而奋进,望远山而前行&am…

IDEA设置 | 个性化设置

文章目录 IDEA设置总结IDEA自动生成序列化ID IDEA设置总结 本篇博客将专注于整理IDEA新UI界面的相关设置 IDEA自动生成序列化ID CtrlAltS快捷键打开设置界面 选择Editor→Inspections→JVM languages→Test frameworks,勾选上Serializable class without serialVe…

vxe-table 区域选取、复制粘贴功能,的基本使用

vxe-table区域选取、复制粘贴功能&#xff0c;的基本使用&#xff08;注&#xff1a;该功能仅支持企业版&#xff0c;这里仅供部分演示&#xff09; 1.鼠标区域选择功能&#xff1a; 参数说明&#xff1a; mouse-config.area 是否开启鼠标单元格区域选取 <template>&l…

springboot项目中引入Xxl-Job并部署和使用

目录 模块划分 配置调度中心 配置执行器 添加执行器 写一个简单的定时任务 XxlJobHelper xxl-job是分布式任务调度平台&#xff0c;部署为独立的调度服务平台 github地址&#xff1a;xuxueli/xxl-job: A distributed task scheduling framework.&#xff08;分布式任务调度…

【系统架构师】-案例篇-UML用例图

1、概述 用于表示系统功能需求&#xff0c;以及应用程序与用户或者与其他应用程序之间的交互关系。 2、组成 参与者&#xff08;Actors&#xff09;&#xff1a;与系统交互的用户或其他系统。用一个人形图标表示。用例&#xff08;Use Cases&#xff09;&#xff1a;系统需要…

谷歌Flank潜藏3年的Github Action供应链攻击

01 简 介 Flank [1] 是谷歌 Firebase Test lab 开源在 Github 的一个项目&#xff0c;用于同时对多个安卓和IOS设备进行测试。2024年4月15号 AWS 安全工程师 Adnan Khan 公布了关于该项目代码仓库 Github Action CI/CD 存在漏洞的细节[2]&#xff0c;漏洞在2020年于此 代码合…

20万元奖励!成都市2023年度工业企业稳规成长奖项目申报对象奖励、材料程序

一、申报对象及奖励标准 2020年度&#xff08;2020年3月—2021年2月&#xff09;首次进入成都市规模以上工业名录库的企业&#xff0c;自上规当年起连续两年&#xff08;2021—2022年&#xff09;年度营业收入均保持在15%&#xff08;含&#xff09;以上增速的&#xff0c;一次…

qt 5.15.x 安装android过程记录

1.经过好几天的qt for android 安装&#xff0c;发现存在很多坑 参考其他文章可以编译出APK文件。但是我发现(我的机器上)无法调试apk程序&#xff0c;不能调试那怎么行呢&#xff0c;看了很多文章都是运行出结果了就结束了。没有展示怎么调试程序。 很多文章都是建议安装JDK8…

通信算法之207: 位同步影响调试经验分享

位同步准确&#xff0c;FFT解调后波形&#xff1a; 位同步NO准确&#xff0c;FFT解调后波形&#xff1a; 哈哈哈 哈哈哈 位同步准确为不准确 不准确为准确

Pytorch常用的函数(九)torch.gather()用法

Pytorch常用的函数(九)torch.gather()用法 torch.gather() 就是在指定维度上收集value。 torch.gather() 的必填也是最常用的参数有三个&#xff0c;下面引用官方解释&#xff1a; input (Tensor) – the source tensordim (int) – the axis along which to indexindex (Lo…

android图标底色问题,debug与release不一致

背景 在android 8&#xff08;sdk 26&#xff09;之前的版本&#xff0c;直接使用图片文件作为图标&#xff0c;开发时比较容易控制图标&#xff0c;但是不同的安卓定制版本就不容易统一图标风格了。 在android 8及之后的版本&#xff0c;图标对应的是ic_launcher.xml&#x…

android权限申请说明

theme: condensed-night-purple 在Android开发中&#xff0c;权限是指应用程序需要访问特定的设备功能或数据时所需的用户许可。从Android 6.0&#xff08;API级别23&#xff09;开始&#xff0c;Android引入了运行时权限模型&#xff0c;在应用程序运行期间向用户请求权限&am…

2024年全国五大数学建模竞赛Top榜及难度分析!推荐数维杯!!!

发现最近许多同学都陆续开始准备今年的数学建模竞赛了&#xff0c;但是随着数学建模领域越来越普及&#xff0c;影响力越来越广泛&#xff0c;参加的同学也越来越多&#xff0c;就导致有越来越多各式各样的数学建模竞赛此起彼伏出现&#xff0c;但其中有一些竞赛其实并不值得参…

Github 50k star!吴恩达联合OpenAi共同编写<面向开发者的LLM入门教程> PDF推荐!

今天给大家推荐一本由吴恩达和OpenAI团队共同编写的关于大型语言模型&#xff08;LLM&#xff09;的权威教程<面向开发者的LLM入门教程>&#xff01;&#xff0c;在Github上已经高达50k star了&#xff0c;这含金量不用多说&#xff0c;在这里给大家强烈推荐一波&#xf…

Wappalyzer指纹识别下载安装使用教程,图文教程(超详细)

「作者简介」&#xff1a;2022年北京冬奥会网络安全中国代表队&#xff0c;CSDN Top100&#xff0c;就职奇安信多年&#xff0c;以实战工作为基础对安全知识体系进行总结与归纳&#xff0c;著作适用于快速入门的 《网络安全自学教程》&#xff0c;内容涵盖系统安全、信息收集等…

Spring Security初探

url说明方法/login/oauth/authorize无登录态时跳转到/authentication/require&#xff0c;有登录态时跳转到/loginorg.springframework.security.oauth2.provider.endpoint.AuthorizationEndpoint#authorize/authentication/require自己写的用于重定向到登录页面的urlcn.merryy…
最新文章