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

devtools/2024/10/10 22:33:41/

零基础入门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/devtools/121993.html

相关文章

【api连接ChatGPT的最简单方式】

【api连接ChatGPT的最简单方式】

通过api连接ChatGPT的最简单方式 建立client 其中base_url为代理&#xff0c;若连接官网可省略&#xff1b;配置环境变量 from openai import OpenAI client OpenAI(base_url"https://api.chatanywhere.tech/v1" )或给出api和base_url client OpenAI(api_key&…
阅读更多...
.888勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复

.888勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复

引言 在数字化时代&#xff0c;网络空间的威胁日益增多&#xff0c;其中勒索病毒已成为数据安全领域的一大挑战。近期&#xff0c;.888勒索病毒作为一种新型的恶意软件&#xff0c;正逐渐引起人们的广泛关注。本文将详细介绍.888勒索病毒的特点、如何恢复被其加密的数据文件&a…
阅读更多...
Spring Boot框架：新闻推荐系统开发新趋势

Spring Boot框架：新闻推荐系统开发新趋势

3系统分析 3.1可行性分析 通过对本新闻推荐系统实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本新闻推荐系统采用JAVA作为开发语言&#xff0c;Spring Boot框…
阅读更多...
计算机网络（十） —— IP协议详解，理解运营商和全球网络

计算机网络（十） —— IP协议详解，理解运营商和全球网络

目录 一&#xff0c;关于IP 1.1 什么是IP协议 1.2 前置认识 二&#xff0c;IP报头字段详解 三&#xff0c;网段划分 3.1 IP地址的构成 3.2 网段划分 3.3 子网划分 3.4 IP地址不足问题 四&#xff0c;公网IP和私有IP 五&#xff0c;理解运营商和全球网络 六&#xff…
阅读更多...
平衡二叉搜索树之 AVL 树的模拟实现【C++】

平衡二叉搜索树之 AVL 树的模拟实现【C++】

文章目录 AVL树的简单介绍全部的实现代码放在了文章末尾准备工作包含头文件类的成员变量 构造函数和拷贝构造swap和赋值运算符重载析构函数findinsert[重要]当parent的平衡因子为1/-1时&#xff0c;如何向上更新祖先节点的平衡因子呢&#xff1f;怎么旋转&#xff1f;左单旋右单…
阅读更多...
如何查询 Elasticsearch 的版本

如何查询 Elasticsearch 的版本

要查询 Elasticsearch (ES) 的版本&#xff0c;您可以使用以下几种方法: 1. 使用 REST API 发送一个 GET 请求到 Elasticsearch 的根端点: curl -X GET "http://localhost:9200"这将返回包含版本信息的 JSON 响应。 2. 使用 Kibana 控制台 如果您使用 Kibana&am…
阅读更多...
初识算法 · 滑动窗口(1)

初识算法 · 滑动窗口(1)

目录 前言&#xff1a; 长度最小的子数组 题目解析 算法原理 算法编写 无重复长度的最小字符串 题目解析 算法原理 算法编写 前言&#xff1a; 本文开始&#xff0c;介绍的是滑动窗口算法类型的题目&#xff0c;滑动窗口本质上其实也是双指针&#xff0c;但是呢&#…
阅读更多...
79. 单词搜索

79. 单词搜索

思路 每次以当前位置为初始位置开始遍历&#xff0c;看是否找到单词 &#xff08;以官方题解做出&#xff09; v:代表等于work[k]且已走过的位置 d:四个方向 回溯&#xff08;遍历&#xff09;&#xff1a; 匹配不上&#xff1a;终止 找到了&#xff1a;终止&#xff08;先…
阅读更多...
最新文章

Copyright @ 2022~2023