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

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

一、image的属性mode的值

在微信小程序或者类似使用了小程序组件规范的框架中，<image>组件的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) => `
                   <View className="item-all" onclick="goToDetailPage(${item.id} )">
                      <img src=${item.imgurl} alt=''" className="item-img">
                        <View className="item-View">${item.title}</View>
                     </View>
               `,
    )
    .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);
}