2023/07/23-Toy模板网

这篇具有很好参考价值的文章主要介绍了2023/07/23。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

方式一：

func () {
    const p1 = api1();
    const p2 = api2();
    const p3 = 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. 滚动条隐藏

2023/07/23,每周小记,前端,个人开发,笔记,javascript,css3

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;
    }
}