学习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.mzph.cn/web/8804.shtml

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

相关文章

力扣-21. 合并两个有序链表-js实现

/*** Definition for singly-linked list.* function ListNode(val, next) {* this.val (valundefined ? 0 : val)* this.next (nextundefined ? null : next)* }*/ /*** param {ListNode} list1* param {ListNode} list2* return {ListNode}*/ const mergeTwoList…

关于zabbix简介及zabbix服务端的部署

文章目录 一、zabbix概念1、zabbix简介2、zabbix主要特点3、zabbix运行机制4、zabbix应用场景5、zabbix监控原理6、zabbix的子程序7、zabbix监控的架构模式7.1 server-client架构7.2 server-proxy-client架构7.3 master-node-client 二、部署zabbix1、服务器配置2、服务器环境3…

CSS伪类选择器

目录 前言: 链接伪类: 用户行为伪类: 元素状态伪类: 结构化伪类: 否定伪类: 目标伪类: 输入伪类: 前言: 在CSS中有一种特殊的选择器:伪类选择器&…

深入分析网络智能摄像头的RTSP协议安全风险

本文为转载,原作者:山石网科安全技术研究院 网络摄像头作为现代安防体系的关键组成部分,已经广泛应用于各类场所,包括交通枢纽、教育机构、企业办公区、零售商场等公共和私人领域。它们主要负责提供实时视频监控,以加…

自己的服务器部署了Excalidraw,你确定不试试?

Excalidraw是一款开源的虚拟手绘风格白板工具,专为快速创作草图、流程图、示意图等设计。它的特色在于提供了一种类似手绘的视觉效果,使得制作的图表看起来更加自然和非正式,适合创意讨论、头脑风暴以及远程协作场景。Excalidraw强调易用性和…

93、动态规划-最长回文子串

思路 首先从暴力递归开始,回文首尾指针相向运动肯定想等。就是回文,代码如下: public String longestPalindrome(String s) {if (s null || s.length() 0) {return "";}return longestPalindromeHelper(s, 0, s.length() - 1);…

量化教程3---miniqmt当作第三方库设置,提供源代码

qmt提供了大qmt和miniqmt,大qmt在平台使用,miniqmt提供了交易的api和数据可以本地使用,非常的方便,合适自己开发大型的策略,本地还可以访问其他数据,网络等,也支持服务器 以前的教程 qmt教程1…

内网安全【2】——域防火墙/入站出站规则/不出网隧道上线/组策略对象同步

-隧道技术:解决不出网协议上线的问题(利用出网协议进行封装出网)(网络里面有网络防护,防火墙设置让你不能正常访问网络 但有些又能正常访问,利用不同的协议tcp udp 以及连接的方向:正向、反向) -代理技术&…

uni-app 多列picker切换列显示对应内容

html部分&#xff1a; <view class"uni-list"><view class"uni-list-cell"><view class"uni-list-cell-left">选择用户</view><view class"uni-list-cell-db"><picker mode"multiSelector"…

【密评】 | 商用密码应用安全性评估从业人员考核题库(5/58)

我国金融信息系统、第二代居民身份证管理系统、国家电力信息系统、社会保障信息系统、全国中小学学籍管理系统中&#xff0c;都应用&#xff08;&#xff09;技术构建了密码保障体系。 A. 核心密码 B. 普通密码 C. 商用密码 D. 核心密码和普通密码 商用密码从业单位开展商用密…

【VUE】el-descriptions 描述列表

Descriptions 描述列表 列表形式展示多个字段。 <el-descriptions title"用户信息"><el-descriptions-item label"用户名">kooriookami</el-descriptions-item><el-descriptions-item label"手机号">18100000000</e…

学习3:scrapy请求对象、模拟登录、POST请求、管道的使用、crawlspider爬虫类

请求对象 请求对象参数 scrapy.Request(url[],callback,method"GET",headers,body,cookies,meta,dont_filterFalse)callback 表示当前的url响应交给那个函数去处理method 指定请求方式headers 接受一个字典&#xff0c;其中不包括cookiesbody 接收json字符串&#…

uniapp读取项目本地文件/json文件/txt文件

uniapp读取项目本地文件/json文件/txt文件 文件必须放在static目录下 方法&#xff1a; /*** 访问static里面的文件* param url 文件路径 必须在static目录下*/ function localFetch(url) {return new Promise((resolve, reject) > {plus.io.resolveLocalFileSystemURL(_ww…

阿里云VOD视频点播流程(2)

二、视频点播 1、入门代码 基于OSS原生SDK上传 &#xff0c;参考文档&#xff1a;https://help.aliyun.com/zh/vod/user-guide/upload-media-files-by-using-oss-sdks?spma2c4g.11186623.0.0.1f02273fj4lxNJ 视频点播面向开发者提供了丰富的上传方式&#xff0c;其中上传SDK&…

从零开始的软件测试学习之旅(八)jmeter线程组参数化及函数学习

jmeter线程组参数化及函数学习 Jmeter基础基本使用流程组件与元件 线程组线程的执行方式Jmeter组件执行顺序 常见属性设置查看结果数的作用域举例 Jmeter参数化实现方式1.用户定义参数2.用户参数3.函数4.csv数据文件设置 每日复习 Jmeter基础 基本使用流程 启动项目案例 启动…

DUX 主题 版本:8.2 WordPress主题优化版

主题下载地址&#xff1a;DUX 主题优化版.zip 支持夜间模式、快讯、专题、百度收录、人机验证、多级分类筛选&#xff0c;适用于垂直站点、科技博客、个人站&#xff0c;扁平化设计、简洁白色、超多功能配置、会员中心、直达链接、自动缩略图

添砖Java之路其三——自增自减运算符,数据转换与原码反码补码。

目录 运算符&#xff1a; 转换&#xff1a; 隐式转换&#xff1a; 小范围数据可以直接可以给大范围数据&#xff1a; 这里做了一张图范围向下兼容表​编辑 运算时&#xff0c;数据范围小的和数据范围大的&#xff0c;需要讲运算范围小的提升为运算范围大的同类&#xff0c…

全球AI新闻速递

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是「奇点」&#xff0c;江湖人称 singularity。刚工作几年&#xff0c;想和大家一同进步&#x1f91d;&#x1f91d; 一位上进心十足的【Java ToB端大厂…

C/C++开发,opencv-features2d模块,SIFT等特征检测器应用

目录 一、OpenCV-features2d 模块简介 1.1 features2d 模块信息 1.2 features2d 模块应用流程 二、features2d 模块编码案例 2.1 实现逻辑 2.2 features2d 模块应用程序代码 2.3 程序编译及运行 一、OpenCV-features2d 模块简介 1.1 features2d 模块信息 features2d 是…

炒美股怎么开户?

近年来&#xff0c;随着国内投资者对境外投资需求的不断增长&#xff0c;炒美股逐渐成为许多投资者的选择。然而&#xff0c;随着监管政策的不断完善&#xff0c;传统的互联网券商开户方式已经不再适用。那么&#xff0c;对于想要入场美股市场的投资者来说&#xff0c;该如何开…