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

server/2024/10/21 7:32:45/

零基础入门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.ppmy.cn/server/128283.html

相关文章

利用Spring Boot构建足球青训管理平台

利用Spring Boot构建足球青训管理平台

2 相关技术简介 2.1 Java技术 Java是一门伟大的纯面向对象的编程语言和编程语言。同时&#xff0c;它还是Java语言从嵌入式开发到企业级开发的平台。Java凭借其一次编译&#xff0c;任何地方执行的优点&#xff0c;使得盛行的web应用程序有大量的Java编译&#xff0c;很好地支…
阅读更多...
信号处理: Block Pending Handler 与 SIGKILL/SIGSTOP 实验

信号处理: Block Pending Handler 与 SIGKILL/SIGSTOP 实验

1. 信号处理机制的 “三张表” kill -l &#xff1a;前 31 个信号为系统标准信号。 block pending handler 三张表保存在每个进程的进程控制块 —— pcb 中&#xff0c;它们分别对应了某一信号的阻塞状态、待处理状态以及处理方式。 block &#xff1a;通过 sigset_t 类型实现&…
阅读更多...
数据库管理-第245期 主流国产数据库RAC架构概览（20240929）

数据库管理-第245期 主流国产数据库RAC架构概览（20240929）

数据库管理245期 2024-09-29 数据库管理-第245期 主流国产数据库RAC架构概览&#xff08;20240929&#xff09;1 DMDSC2 KingBaseES RAC3 PolarDB4 Cantian5 HaloDB DLB/Data Sharding总结 数据库管理-第245期 主流国产数据库RAC架构概览&#xff08;20240929&#xff09; 作者…
阅读更多...
18732 最短路问题

18732 最短路问题

### 思路 1. **建模问题**&#xff1a;将车站和公交线路建模为图&#xff0c;其中车站是节点&#xff0c;公交线路是带权边。 2. **选择算法**&#xff1a;使用Dijkstra算法求解从车站1到车站n的最短路径问题。 3. **初始化**&#xff1a;创建一个优先队列&#xff08;最小堆&…
阅读更多...
FinalShell解决Docker日志中文乱码问题

FinalShell解决Docker日志中文乱码问题

在DockerFile文件末尾添加如下配置即可解决&#xff1a; #解决Docker容器中文显示乱码问题 ENV LANG C.UTF-8 ENV LC_ALL C.UTF-8
阅读更多...
php常用的注释符号

php常用的注释符号

如果没有安装vscode和小皮&#xff0c;请点击下方链接安装&#xff1a; Vscode、小皮面板安装-CSDN博客 在学习php过程中&#xff0c;肯定少不了注释&#xff0c;也可以理解为备注的信息&#xff0c;来提醒自己这段代码有什么用&#xff0c;是什么意思等&#xff0c;接下来就介…
阅读更多...
平台数据分类与聚类实验报告

平台数据分类与聚类实验报告

参考书籍&#xff1a;《数据流挖掘与在线学习算法》 李志杰 1.6.1 实验目的 本书内容以及课程实验主要涉及Java程序设计语言、数据挖掘工具Weka和数据流机器学习平台MOA&#xff0c;因此&#xff0c;需要安装、配置并熟悉实验环境。Java、Weka和MOA都是开源小软件&#xff0…
阅读更多...
制作离线版Koczkatamas工具包

制作离线版Koczkatamas工具包

一、下载源码 从https://github.com/koczkatamas/koczkatamas.github.io下载koczkatamas.github.io-master.zip 二、解压 $ unzip koczkatamas.github.io-master.zip三、运行index.html 可以看到输入一个字符后&#xff0c;下面的各种编码都没有显示&#xff0c;则表示运行…
阅读更多...
最新文章

Copyright @ 2022~2023