uniapp学习笔记

box-shadow

box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.08);：给 .box 元素添加一个盒子阴影效果。阴影的偏移量为水平0、垂直10rpx，模糊半径为30rpx，颜色为半透明的黑色（alpha值为0.08）。

border-radius

border-radius: 10rpx;
这个属性用于设置元素边框的圆角大小。如果这里使用的是rpx单位，那么它表示圆角的半径将以响应式像素为单位。但在标准CSS中，你会使用px（像素）、em、rem、%等单位。假设我们将rpx替换为px，那么border-radius: 10px;会将元素的边框设置为10像素的圆角。这意味着元素的角将变得圆润，而不是尖锐的直角。

overflow

overflow: hidden;
这个属性用于设置当元素的内容溢出其指定大小时的处理方式。overflow: hidden;的值意味着如果内容超出了元素的边框（即宽度和高度），那么超出的部分将被裁剪掉，不会显示在元素框之外。这对于创建图像裁剪效果、隐藏超出范围的文本或布局调整非常有用。

text-align

text-align CSS 属性设置块元素或者单元格框的行内内容的水平对齐。这意味着其效果和 vertical-align 类似，但是是水平方向的。（这个可以把某一行的字从默认的左边放到右边，或者是居中）

map

let urls = pets.value.map(item=>item.url) 这样写才对

触底加载更多

pets.value = […pets.value,…res.data.data]
在JavaScript中，pets.value = […pets.value, …res.data.data] 这行代码执行了一个数组的扩展（spread）和合并（concatenation）操作。这里假设 pets.value 是一个响应式的数据结构（比如在Vue或Vue 3的Composition API中使用的ref对象），它当前存储了一个数组。同时，res.data.data 也是从网络请求中获取的，并且预期它也是一个数组。

扩展操作符（Spread Operator）…：这个操作符用于将一个数组（或可迭代对象）的元素展开成一个个单独的项。
…pets.value：这会将 pets.value 数组中的所有元素展开成单独的项。
…res.data.data：同样，这会将 res.data.data 数组中的所有元素展开成单独的项。
数组字面量（Array Literal）[]：使用方括号创建了一个新的数组。
合并：将两个通过扩展操作符展开的数组元素合并到一个新的数组中。由于这是在数组字面量内部进行的，所以最终会创建一个新的数组。
赋值：最后，这个新创建的数组被赋值给 pets.value。
重要的是要注意，由于 pets.value 被假设为一个响应式引用（比如在Vue 3中使用ref创建的），当你给它赋一个新的数组时，Vue的响应性系统会检测到这个变化，并自动更新DOM或其他依赖这个数据的组件或逻辑。

ustify-content

justify-content: center; 是CSS中的一个属性值，用于设置弹性盒子（flex container）中项目（flex items）在主轴（main axis）上的对齐方式。当在弹性容器上设置 display: flex; 或 display: inline-flex; 后，可以使用 justify-content 属性来定义如何沿着主轴分配弹性容器中的空间。

justify-content: center; 的具体作用是让弹性容器中的项目在主轴上居中对齐。如果主轴是水平方向（这是默认的），那么项目就会在水平方向上居中对齐；如果主轴是垂直方向（通过 flex-direction 属性设置），那么项目就会在垂直方向上居中对齐。

box-sizing

box-sizing: border-box; 是CSS中的一个属性值，用于改变元素的盒模型计算方式。在CSS中，元素的盒模型（Box Model）由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。默认情况下，元素的宽度和高度只包括内容的宽度和高度，而不包括内边距、边框和外边距。

当你将box-sizing设置为border-box时，元素的宽度和高度就会包括内容、内边距和边框，但不包括外边距。这意味着，无论你如何改变元素的内边距或边框的宽度，元素的总体宽度和高度都将保持不变，从而避免了布局上的意外变化。

这种盒模型设置对于响应式设计和网格布局特别有用，因为它使得布局更加可预测和可控。通过使用border-box，开发者可以更容易地创建灵活的布局，而不必担心元素尺寸的变化对布局造成影响。

举个例子，如果你有一个宽度为100%的容器，并给这个容器设置了边框和内边距，但在没有设置box-sizing: border-box;的情况下，这个容器的实际可视宽度会超出其父容器的宽度，因为边框和内边距会额外增加容器的宽度。而设置了box-sizing: border-box;之后，这个容器的实际可视宽度就会严格等于其声明的宽度，边框和内边距会在容器内部被计算，不会影响到容器的外部尺寸。

margin: 0 auto; 与 align-items: center; 的区别

1. 作用范围

  • margin: 0 auto;：通常用于块级元素（如<div>、<p>等），主要影响元素的水平对齐。这里的auto值应用于元素的左右外边距（margin-left和margin-right），使元素在其父元素中水平居中。这个属性不会改变元素的垂直位置。
  • **align-items: center;**：是Flexbox或Grid布局中的一个属性，用于在交叉轴（cross axis）上对齐容器内的项目（子元素）。在Flexbox中，这通常意味着在垂直方向上（如果flex容器的flex-direction是row或row-reverse）或水平方向上（如果flex-direction是column或column-reverse）居中对齐子元素。

2. 使用上下文

  • **margin: 0 auto;**：可以在没有Flexbox或Grid布局的普通文档流中使用，只要元素是块级元素并且有明确的宽度（不是auto），它就可以工作。
  • **align-items: center;**：只能在Flexbox或Grid布局的上下文中使用。它需要在父元素上设置display: flex;或display: grid;来启用Flexbox或Grid布局。

3. 影响的目标

  • **margin: 0 auto;**：直接影响设置了该样式的元素本身，使其在其父元素中水平居中。
  • **align-items: center;**：影响的是设置了Flexbox或Grid布局的容器的子元素，在交叉轴上居中对齐这些子元素。

4. 垂直居中的差异

  • **margin: 0 auto;**：本身不支持垂直居中（除非配合其他技术，如使用绝对定位、Flexbox、Grid或垂直外边距的负值等）。
  • **align-items: center;**：在Flexbox或Grid布局中可以直接用于垂直居中（如果flex容器的flex-direction是column或Grid容器的轴配置允许），或者通过调整justify-content（Flexbox）或Grid的对齐属性来实现水平居中。

line-height

在CSS中，line-height 属性用于设置行间的距离（行高），即文本行基线之间的距离。然而，rpx（responsive pixel）并不是标准CSS中的单位。rpx通常与某些框架或平台相关，比如微信小程序，它用于实现响应式布局，使得元素的大小可以根据屏幕宽度自动调整。

文本不换行，超出的…处理

这组CSS样式常用于处理文本溢出时的显示方式，特别是在需要限制元素内文本显示长度的场景中，比如标题、描述等文本内容。下面分别解释这三个属性的作用：

  1. overflow: hidden;

    这个属性用于设置当内容溢出元素框时应该如何处理。hidden 值表示溢出的内容会被剪裁，且不可见。这意味着，如果文本或子元素超出了其父元素的边界，那么超出部分将不会显示。这是实现文本截断效果的基础。

  2. white-space: nowrap;

    white-space 属性用于设置如何处理元素内的空白符及如何控制文本换行。nowrap 值表示文本不会换行，直到遇到 <br> 标签为止。这个属性确保了文本在一行内显示，即使内容超出了容器的宽度也不会自动换行到下一行，为后续的文本截断（ellipsis）做准备。

  3. text-overflow: ellipsis;

    这个属性用于指定当文本溢出包含它的元素时，应该如何显示溢出的文本。ellipsis 值表示溢出的文本会被截断，并以省略号（…）表示。然而，为了这个属性能够生效，通常需要配合 overflow: hidden; 和 white-space: nowrap; 一起使用，因为只有当文本被限制在一行内且溢出容器时，text-overflow: ellipsis; 才会显示省略号。

综上所述，这组样式常用于创建一个单行文本溢出时显示省略号的效果，如下所示：

1
2
3
4
5
6
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 200px; /* 假设设置了一个固定的宽度 */
}

HTML 示例：

1
<div class="ellipsis">这是一段非常长的文本，需要被截断并显示省略号...</div>

磨砂效果制作

这段CSS代码主要用于设置一个元素的样式，使其具有半透明的黑色背景、白色文字、以及使用Flexbox布局进行居中显示。

1
2
3
4
5
6
background: rgba(0,0,0,0.2); /* 半透明的黑色背景 */
color: #fff; /* 白色文字 */
display: flex; /* 使用Flexbox布局 */
align-items: center; /* 子元素在交叉轴上的对齐方式为中心 */
justify-content: center; /* 子元素在主轴上的对齐方式为中心 */
backdrop-filter: blur(20px); /* 应用背景模糊效果，这里使用px作为单位 */
  • background: rgba(0,0,0,0.2);：设置元素的背景颜色为半透明的黑色，其中rgba的a值（即透明度）为0.2，表示背景颜色有20%的不透明度，其余80%为透明。
  • color: #fff;：设置元素的文字颜色为白色（#fff是白色的十六进制表示）。
  • display: flex;：使元素成为Flex容器，其子元素将按照Flexbox布局进行排列。
  • align-items: center;：在Flex容器的交叉轴上（默认情况下是垂直方向），将子元素居中对齐。
  • justify-content: center;：在Flex容器的主轴上（默认情况下是水平方向），将子元素居中对齐。
  • backdrop-filter: blur(20px);：对元素背后的内容应用模糊效果，这里的模糊半径是20px。这个属性通常用于增强视觉效果，使元素看起来更加柔和或融入背景。但是，请注意，backdrop-filter的兼容性可能因浏览器而异，并且可能对性能有一定影响。

display: grid

display: grid; 是CSS中的一个属性值，它用于将元素的显示类型设置为网格布局（Grid Layout）。网格布局是一种强大的CSS布局系统，它允许开发者以二维网格的形式来组织页面上的元素。这种布局方式既灵活又强大，非常适合创建复杂的页面布局。

网格布局的主要特点：

  1. 二维布局：网格布局不仅处理行（水平方向），还处理列（垂直方向），为页面布局提供了更多的灵活性和控制力。

  2. 容器与项目：在网格布局中，有一个外部的容器（grid container），它内部包含了一系列的子元素（grid items）。容器通过定义网格的行和列来创建网格线，而子元素则根据这些网格线来定位。

  3. 简单明了的语法：网格布局引入了一系列新的CSS属性和函数，使得定义网格布局变得更加简单和直观。例如，grid-template-columns 和 grid-template-rows 用于定义网格的列和行，grid-column 和 grid-row 用于指定子元素应该跨越哪些网格线。

  4. 灵活的定位：子元素（网格项）可以在网格内部自由移动和定位，而不需要使用传统的浮动（floats）、定位（positioning）或表格（tables）等布局方法。

  5. 间隙控制：gap 属性（或其别名 row-gap 和 column-gap）允许开发者轻松地控制网格行和列之间的间隙。

  6. 响应式设计：网格布局支持媒体查询（Media Queries），使得开发者可以创建响应式的网格布局，以适应不同屏幕尺寸和设备。

使用 display: grid;

当你将一个元素的 display 属性设置为 grid 时，该元素就变成了一个网格容器，其直接子元素则自动成为网格项。然后，你可以使用各种网格相关的CSS属性来定义网格的布局，比如 grid-template-columns、grid-template-rows、justify-items、align-items、place-items、justify-content、align-content、grid-column-gap、grid-row-gap（或简写为 gap）等。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建三列，每列宽度相等 */
  grid-gap: 10px; /* 行和列之间的间隙为10px */
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid #ccc;
  padding: 20px;
  text-align: center;
}
1
2
3
4
5
6
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <!-- 可以添加更多网格项 -->
</div>

在这个示例中，.grid-container 是一个网格容器，它包含三个网格项（.grid-item）。网格容器定义了三列，每列的宽度相等，并且行和列之间的间隙为10px。网格项则填充在这些列中，每个网格项都具有一定的内边距、边框和背景色。

多层级元素居中方式

1
2
3
4
5
6
7
position: absolute;
		top:10vh;
		left: 0;
		right: 0;
		margin: auto;
		width: fit-content;

uni-easyinput 增强输入框

这个输入框完美的解决了我在项目中出现的想在输入框中的左侧添加一个图标的问题
基本用法
输入内容后，输入框尾部会显示清除按钮，点击可清除内容，如不需要展示图标，clearable 属性设置为 false 即可

clearable 属性设置为 true ，输入框聚焦且内容不为空时，才会显示内容

1
<uni-easyinput v-model="value" placeholder="请输入内容"></uni-easyinput>

复制代码
输入框带左右图标
设置 prefixIcon 属性来显示输入框的头部图标

设置 suffixIcon 属性来显示输入框的尾部图标

注意图标当前只支持 uni-icons 内置的图标，当配置 suffixIcon 属性后，会覆盖 :clearable=”true” 和 type=”password” 时的原有图标

绑定 @iconClick 事件可以触发图标的点击 ，返回 prefix 表示点击左侧图标，返回 suffix 表示点击右侧图标

1
2
3
4
5
<!-- 输入框头部图标 -->
<uni-easyinput prefixIcon="search" v-model="value" placeholder="请输入内容" @iconClick="onClick"></uni-easyinput>
<!-- 展示输入框尾部图标 -->
<uni-easyinput suffixIcon="search"  v-model="value" placeholder="请输入内容" @iconClick="onClick"></uni-easyinput>
复制代码

插槽
设置 right 属性来设置右侧内容 插槽。

1
2
3
4
5
6
<uni-easyinput>
	<template #right>
		<view>密码</view>
	</template>
</uni-easyinput>
复制代码

输入框禁用
设置 disable 属性可以禁用输入框，此时输入框不可编辑

1
2
3
4
5
6
7
<uni-easyinput disabled  v-model="value" placeholder="请输入内容"></uni-easyinput>
复制代码
密码框
设置 type="password" 时，输入框内容将会不可见，由实心点代替，同时输入框尾部会显示眼睛图标，点击可切换内容显示状态

<uni-easyinput type="password" v-model="password" placeholder="请输入密码"></uni-easyinput>
复制代码

输入框聚焦
设置 focus 属性可以使输入框聚焦

如果页面存在多个设置 focus 属性的输入框，只有最后一个输入框的 focus 属性会生效

1
2
<uni-easyinput focus v-model="password" placeholder="请输入内容"></uni-easyinput>
复制代码

多行文本
设置 type=”textarea” 时可输入多行文本

1
2
<uni-easyinput type="textarea" v-model="value" placeholder="请输入内容"></uni-easyinput>
复制代码

多行文本自动高度
设置 type=”textarea” 时且设置 autoHeight 属性，可使用多行文本的自动高度，会跟随内容调整输入框的显示高度

1
2
3
4
<uni-easyinput type="textarea" autoHeight v-model="value" placeholder="请输入内容"></uni-easyinput>
复制代码
取消边框
设置 :inputBorder="false" 时可取消输入框的边框显示，同时搭配 uni-forms 的 :border="true" 有较好的效果
```