uniapp学习（002 常用的内置组件）

news2024/11/19 20:21:04

零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战，开发打包微信小程序、抖音小程序、H5、安卓APP客户端等

总时长 23:40:00 共116P

此文章包含第5p-第p10的内容

文章目录

    • view组件相当于div标签
      • 按下松开例子
      • 冒泡例子
    • text组件 相当于span标签
    • scroll-view
      • 纵向滚动
      • 横向滚动
    • swiper
      • 例子
      • image和swiper配合
      • 展示效果
    • navigator 路由导航
      • 例子
      • 跳转类型
        • reLaunch 跳转后销毁之前的页面（无法返回上一页）
      • 点击跳转到其他小程序 设置target
      • 给图片加上跳转（包裹住image即可）
    • button按钮
      • 例子
    • input输入框
      • 默认占位符 placeholder
      • 设置输入类型
      • 用手机使用ip地址进行查看

view组件相当于div标签

在这里插入图片描述
在这里插入图片描述

按下松开例子

代码
在这里插入图片描述

页面正常的时候
在这里插入图片描述

按下效果
在这里插入图片描述

松开效果（恢复原样）
在这里插入图片描述

冒泡例子

代码
在这里插入图片描述
样式
在这里插入图片描述
正常时候
在这里插入图片描述

点击时都发生了变化
在这里插入图片描述

松开时（恢复原样）
在这里插入图片描述

我们只想让子元素进行改变，父元素不变
添加阻止属性即可
在这里插入图片描述

在这里插入图片描述

ps:在 Vue 模板中，可以直接使用 .stop 修饰符来阻止事件冒泡。
如：

<button @click.stop="childClick">Click Me</button>

text组件 相当于span标签

在这里插入图片描述

使用text组件可以让文本可选 但是要添加属性 selectable=‘true’ 其中 =‘true’可以忽略，只写selectable
在这里插入图片描述
在这里插入图片描述
可以添加多个空格的空间
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

scroll-view

在这里插入图片描述

纵向滚动

在这里插入图片描述

出现滚动条
在这里插入图片描述

横向滚动

在这里插入图片描述

在这里插入图片描述

不自动换行 white-space:nowrap;
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

swiper

在这里插入图片描述

例子

在这里插入图片描述

100vw代表全屏宽度
在这里插入图片描述

100vh代表屏幕的高度
在这里插入图片描述

查看时会多出一块，因为边框也占了位置，我们添加box-sizing: border-box; 就可以解决
在这里插入图片描述
间隔换颜色
在这里插入图片描述
在这里插入图片描述

加指示点
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

image和swiper配合

在这里插入图片描述

一般图片都放在static文件夹里
在这里插入图片描述
这里我们存储4张不同类型的图片

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

aspectFill是最常用的格式，对多余的区域进行了裁剪
在这里插入图片描述

在这里插入图片描述

也可以添加网络图片
在这里插入图片描述

展示效果

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

navigator 路由导航

在这里插入图片描述

例子

在这里插入图片描述
在这里插入图片描述

点击跳转到其他页面
在这里插入图片描述

跳转类型

在这里插入图片描述

在这里插入图片描述

reLaunch 跳转后销毁之前的页面（无法返回上一页）

在这里插入图片描述

点击跳转到其他小程序 设置target

在这里插入图片描述

在这里插入图片描述

给图片加上跳转（包裹住image即可）

在这里插入图片描述

button按钮

在这里插入图片描述

在这里插入图片描述

例子

在这里插入图片描述
在这里插入图片描述

提交时可以让loading变成true 提交后 让其变成false （这只是视觉上的loading）
在这里插入图片描述

input输入框

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

默认占位符 placeholder

在这里插入图片描述

在这里插入图片描述

也可以使用class在这里插入图片描述

设置输入类型

在这里插入图片描述

用手机使用ip地址进行查看

如果手机看不到 记得把电脑防火墙5173端口放开 或者整个防火墙关掉（不推荐）
在这里插入图片描述

在这里插入图片描述
也可以给手机键盘右下角的文字进行设置
ps:类型必须是text时才可以
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

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

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

相关文章

第二百五十八节 JPA教程 - JPA查询选择两个实体示例

第二百五十八节 JPA教程 - JPA查询选择两个实体示例

JPA教程 - JPA查询选择两个实体示例 以下JPQL从两个实体中选择。 List l em.createQuery("SELECT d, m FROM Department d, Professor m WHERE d m.department").getResultList();例子 以下代码来自Professor.java。 package cn.w3cschool.common;import java.…
阅读更多...
想跳槽，我懂你！

想跳槽，我懂你！

在职场的长河中&#xff0c;每个人都是自己航行船的舵手&#xff0c;时而顺流而下享受平静&#xff0c;时而逆流而上追求挑战。跳槽&#xff0c;作为职业生涯中常见且重要的决策之一&#xff0c;往往承载着对现状的不满、对未来的憧憬以及对自我价值的重新定位。本文将从跳槽的…
阅读更多...
紫光 FPGA固化RAM位置的操作流程

紫光 FPGA固化RAM位置的操作流程

1. 前提条件&#xff1a;需要已经编译出一个功能完整的没有时序违例的版本出来&#xff1b; 2. 将RAM导出至txt文件&#xff1a; 这个过程需要几分钟&#xff0c;耐心等待一下。 等待提示成功就可以进行下一步操作了。 3. 将【2】中的txt文件中的内容全选复制粘贴到pcf文件的…
阅读更多...
离职赔偿一览表-这年头每人都应该备一份

离职赔偿一览表-这年头每人都应该备一份

离职赔偿一览表 离职时一定要知道N、N1&#xff0c;2N的计算方法 N&#xff08;经济补偿金&#xff09;、N1&#xff08;经济补偿金代通知金&#xff09;&#xff0c;2N&#xff08;赔偿金&#xff09;其实都是简称。 01 经济补偿金&#xff08;N&#xff09; 经济补偿金工…
阅读更多...
led灯什么牌子的质量好？五款市面上非常适合孩子使用的护眼台灯

led灯什么牌子的质量好？五款市面上非常适合孩子使用的护眼台灯

在当今这个数字化时代&#xff0c;孩子们从小就开始频繁接触各种数码设备&#xff0c;每日长时间面对着电子屏幕。由于疫情的影响&#xff0c;居家上网课更是让孩子们不得不持续面对电子屏幕。而儿童和青少年时期正是眼睛发育的关键阶段&#xff0c;许多孩子因为在这个时期过度…
阅读更多...
Python从入门到精通-基础篇

Python从入门到精通-基础篇

1.Python的起源 1989年&#xff0c;为了打发圣诞节假期&#xff0c;Gudio van Rossum&#xff08;吉多范罗苏姆&#xff08;龟叔&#xff09;&#xff09;决心开发一个新的解释程序&#xff08;Python雏形&#xff09; 1991年&#xff0c;第一个Python解释器诞生 Python这个…
阅读更多...
根据ip地址查网页怎么查询？

根据ip地址查网页怎么查询？

一、通过命令提示符查询查网页&#xff08;Windows系统&#xff09; ①按“WinR”键&#xff0c;打开运营窗口。 ②输入“cmd”“回车”&#xff0c;打开命令提示符窗口。 ③输入“nslookup ip地址”将ip地址换成查询的实际ip地址“回车” ⑤系统返回输入ip地址对应的域名信息…
阅读更多...
Latex 首字母下沉，lettrine冲突报错，手动解决办法

Latex 首字母下沉，lettrine冲突报错，手动解决办法

在文章最开始&#xff0c;\usepackage{*}下面&#xff0c;设置两个命令&#xff0c; \newcommand{\calcfirstletterheight}[3]{ % #1 是高度变量&#xff0c;#2 是首字母&#xff0c;#3 是比例变量% 测量首字母的高度\settoheight{#1}{#2} % 测量首字母的高度% 计算比例&…
阅读更多...
FristiLeaks靶场打靶记录

FristiLeaks靶场打靶记录

一、靶机介绍 靶机下载地址&#xff1a;https://download.vulnhub.com/fristileaks/FristiLeaks_1.3.ova 二、信息收集 扫描靶机ip arp-scan -l 确认靶机ip为&#xff1a;192.168.5.132 扫描端口 nmap -p- -A 192.168.5.132 扫描目录 dirb http://192.168.5.132/ 进入网…
阅读更多...
【STM32】 TCP/IP通信协议--LwIP介绍

【STM32】 TCP/IP通信协议--LwIP介绍

一、前言 TCP/IP是干啥的&#xff1f;它跟SPI、IIC、CAN有什么区别&#xff1f;它如何实现stm32的通讯&#xff1f;如何去配置&#xff1f;为了搞懂这些问题&#xff0c;查询资料可解决如下疑问&#xff1a; 1.为什么要用以太网通信? 以太网(Ethernet) 是指遵守 IEEE 802.3 …
阅读更多...
一体式远程IO：纺织行业数字化转型的新引擎

一体式远程IO：纺织行业数字化转型的新引擎

在纺织行业这片古老而又充满活力的土地上&#xff0c;技术的每一次飞跃都深刻地改变着生产模式与效率。随着纺织技术的飞速发展和人工成本的日益提高&#xff0c;纺织企业正积极寻求通过自动化和智能化手段来降低生产成本、提升市场竞争力。一体式远程IO&#xff08;输入输出&a…
阅读更多...
mysql怎么修改一个字段中的所有部分数据

mysql怎么修改一个字段中的所有部分数据

UPDATE videos SET VideoCode replace(VideoCode,flv,mp4); update 表名 set 字段名 replace&#xff08;字段名&#xff0c;‘修改前’&#xff0c;‘修改后’&#xff09;&#xff1b;
阅读更多...
Python精选200Tips：183-185

Python精选200Tips：183-185

针对序列&#xff08;时间、文本&#xff09;数据的网络结构 P183--循环神经网络&#xff08;RNN, Recurrent Neural Network 1980s&#xff09;&#xff08;1&#xff09;模型结构说明&#xff08;2&#xff09;创新性说明&#xff08;3&#xff09;示例代码&#xff1a;类似古…
阅读更多...
无人机在农业方面的应用！

无人机在农业方面的应用！

一、提高农业生产效率 通过搭载农业智能传感器和喷洒设备&#xff0c;可以实现对农田的精准施肥和喷药。这种方式不仅减少了农药和化肥的浪费&#xff0c;还降低了对环境的污染&#xff0c;提高了农业生产效率。 无人机利用热、多光谱和高光谱技术&#xff0c;可以高效、准确…
阅读更多...
3种方法解决Docker容器中配置运行环境问题

3种方法解决Docker容器中配置运行环境问题

1. dockerfile用于通过脚本生成镜像 2.进入docker容器后&#xff0c;配置环境完&#xff0c;导出容器快照为镜像&#xff0c;拷贝到另一个主机&#xff0c;再进行加载&#xff1b; 3.在本地将依赖库等需要的文件按照目录整理好&#xff0c;映射到docker中。 1. dockerfile用于…
阅读更多...
这几个高含金量证书，网工真的该拿

这几个高含金量证书，网工真的该拿

在这个技术日新月异的行业中&#xff0c;不断学习新技能和知识是保持竞争力的关键。 而证书&#xff0c;作为一种专业能力的认证&#xff0c;不仅能够证明你的技术实力&#xff0c;还能为你打开更多的职业发展大门。 在众多的IT认证中&#xff0c;有些证书因其高含金量而备受推…
阅读更多...
四川财谷通信息技术有限公司抖音小店领域的强势力量

四川财谷通信息技术有限公司抖音小店领域的强势力量

在数字化浪潮汹涌的今天&#xff0c;电商行业以其独特的魅力和无限潜力&#xff0c;成为了推动经济发展的重要力量。而在这片充满机遇与挑战的电商蓝海中&#xff0c;四川财谷通信息技术有限公司凭借其敏锐的市场洞察、创新的技术实力以及优质的服务品质&#xff0c;迅速崛起为…
阅读更多...
win10如何禁止指定程序运行？教你5个方法！抓紧学！码住了！

win10如何禁止指定程序运行？教你5个方法！抓紧学！码住了！

在Windows 10系统中&#xff0c;有时我们需要禁止某些程序的运行&#xff0c;以保护系统安全、提高性能或遵循公司政策。 本文将详细介绍五种方法来禁止指定程序在Win10上运行&#xff0c;帮助用户更好地管理自己的系统。 方法一&#xff1a;使用第三方软件管理工具 市场上有…
阅读更多...
AI变革营销全链路：从市场洞察到销售转化，AI将推动营销效率革命

AI变革营销全链路：从市场洞察到销售转化，AI将推动营销效率革命

大家好&#xff01;今天&#xff0c;我要和大家聊聊AI如何助力营销行业&#xff0c;变革营销全链路的。 从市场洞察到销售转化&#xff0c;AI正一步步推动着营销效率的革命。 什么是营销全链路 什么是营销全链路&#xff1f;简单来说&#xff0c;就是从了解消费者需求开始&a…
阅读更多...
一起搭WPF架构之按钮的进阶设计学习

一起搭WPF架构之按钮的进阶设计学习

一起搭WPF架构之按钮的进阶设计学习 1 前言2 进阶设计3 问题解决总结 1 前言 《一起搭WPF架构之浅写View界面按钮的进阶设计》中介绍了按钮的简单设计到进阶设计&#xff0c;这次接着上次进阶设计来做进一步的介绍。 2 进阶设计 代码介绍&#xff1a; <Window.Resources&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023