image的属性mode的值、原生html插入、useGetState

本篇笔记的 ui 框架为 Taro UI 和 react 写的小程序

一、image 的属性 mode 的值

在微信小程序或者类似使用了小程序组件规范的框架中，组件的 mode 属性用于设定图片的缩放模式，以适应不同布局需求。常见的模式值包括但不限于以下几种：

1. scaleToFill：默认值，不保持纵横比缩放图片，使图片完全填充容器。
2. aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，图片有可能未填满整个容器。
3. aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来，长边可能会超过容器。
4. widthFix：宽度不变，高度自动变化，保持原图宽高比不变。
5. top：不缩放图片，只显示图片的顶部区域。
6. bottom：不缩放图片，只显示图片的底部区域。
7. center：不缩放图片，只显示图片的中间区域。
8. left：不缩放图片，只显示图片的左边区域。
9. right：不缩放图片，只显示图片的右边区域。
10. top left：不缩放图片，只显示图片的左上角区域。
11. top right：不缩放图片，只显示图片的右上角区域。
12. bottom left：不缩放图片，只显示图片的左下角区域。
13. bottom right：不缩放图片，只显示图片的右下角区域。

这些模式覆盖了大多数图片展示的需求，可以根据实际应用场景选择合适的模式

二、原生 html 插入

const Item = List
   .map((item) => `
                   
                      
                        ${item.title}
                     
               `,
    )
    .join('');
 document.querySelector('.list').innerHTML = Item;

三、useGetState

在改 bug 的时候遇了 useGetState，这个 hooks

const [is, setIs, getIs] = useGetState('')

打断点，发现使用 set 后获取不到最新值，最后使用 get 获取到 最新的值。

四、css 的阴影

 1、box-shadow

这是最常用的添加阴影的方法，可以给盒子模型元素（如 div、p 等）添加外部阴影。

.box {box-shadow: horizontal-offset vertical-offset blur-radius spread-radius shadow-color;}

• horizontal-offset：水平阴影偏移量，正数向右，负数向左。
• vertical-offset：垂直阴影偏移量，正数向下，负数向上。
• blur-radius：模糊距离，可选，默认为 0。
• spread-radius：阴影扩展大小，可选，默认为 0。
• shadow-color：阴影颜色，默认为黑色。

2、text-shadow

专门用于给文本添加阴影。

.text {text-shadow: horizontal-offset vertical-offset blur-radius shadow-color;}

3、filter: drop-shadow()

此方法也可以给元素添加阴影，它更像一个图像滤镜，可以在视觉上根据元素的 Alpha 通道来应用阴影。

.drop-shadow {filter: drop-shadow(horizontal-offset vertical-offset blur-radius shadow-color);
}