2023/07/23

1. 必须等待所有请求结束后才能执行后续操作的处理方式

方式一：

async func () {const p1 = await api1();const p2 = await api2();const p3 = await api3();Promise.all([p1, p2, p3]).then(res => {后续操作...})
}

方式二：待补充

2. flex 弹性盒子布局多行，最后一行不占满的技巧

外层容器给弹性盒子布局, 且给外层盒子一个after伪类元素。

.container {display: flex;justify-content: space-between; //两边布局flex-wrap: wrap; //换行
}
// 可以理解为占位
.container::after {content: '';width: 30%; height: 0;visibility: hidden;
}

visibility:hidden将元素隐藏，但是在网页中该占的位置还是占着。

给容器内的盒子宽度按照100%等分，比如每行三个盒子就可以给30%，四个盒子就可以给25%, 高度可以由固定内容撑开最好，也可以自己给固定高度。
```
.item {width: 30%;
}
```

3. 滚动条隐藏

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xGnpsroV-1690122936379)(C:\Users\22706\AppData\Roaming\Typora\typora-user-images\image-20230723221329323.png)]$

4.解决小程序image标签和文字无法并排的问题

如下：

<view class="order-content-header"><image class="tiktok-icon" src="@/static/image/homepage/tiktok_icon.png"></image>巧虎奇幻舞台历险记巧虎奇幻舞台历险记巧虎奇幻舞台历险记巧虎奇幻舞台历险记
</view>.order-content-header {width: 446rpx;height: 80rpx;font-size: 28rpx;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;// text-indent: 34rpx;position: relative;.tiktok-icon {// position: absolute;// top: 4rpx;// left: 0;width: 32rpx;height: 32rpx;}
}

得到的结果是这样的，文字总是不能和image底部并排对齐，不论设置vertical-align:middle还是修改文字行高都无法实现对齐。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SpN4YWIx-1690122936380)(C:\Users\22706\AppData\Roaming\Typora\typora-user-images\image-20230723222428607.png)]$

另外开发者工具上查看图片标签，也可以看到图片并没有下边的margin。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9KScZ1yJ-1690122936380)(C:\Users\22706\AppData\Roaming\Typora\typora-user-images\image-20230723222519141.png)]$

最后采用了前辈传授的使用text-indent:px缩进一定距离，然后再将图片定位在缩进的位置。如上代码中注释掉的代码，最终成功实现效果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VkW5V2Ex-1690122936381)(C:\Users\22706\AppData\Roaming\Typora\typora-user-images\image-20230723223011032.png)]$