1. 必須等待所有請求結(jié)束后才能執(zhí)行后續(xù)操作的處理方式
方式一：
func () {
const p1 = api1();
const p2 = api2();
const p3 = api3();
Promise.all([p1, p2, p3]).then(res => {
后續(xù)操作...
})
}
方式二：待補充
2. flex 彈性盒子布局多行，最后一行不占滿的技巧
-
外層容器給彈性盒子布局, 且給外層盒子一個after偽類元素。
.container { display: flex; justify-content: space-between; //兩邊布局 flex-wrap: wrap; //換行 } // 可以理解為占位 .container::after { content: ''; width: 30%; height: 0; visibility: hidden; }visibility:hidden將元素隱藏，但是在網(wǎng)頁中該占的位置還是占著。
-
給容器內(nèi)的盒子寬度按照100%等分，比如每行三個盒子就可以給30%，四個盒子就可以給25%, 高度可以由固定內(nèi)容撐開最好，也可以自己給固定高度。
.item { width: 30%; }
3. 滾動條隱藏
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;
}
}
得到的結(jié)果是這樣的，文字總是不能和image底部并排對齊，不論設(shè)置vertical-align:middle還是修改文字行高都無法實現(xiàn)對齊。
另外開發(fā)者工具上查看圖片標簽，也可以看到圖片并沒有下邊的margin。
最后采用了前輩傳授的使用text-indent:px縮進一定距離，然后再將圖片定位在縮進的位置。如上代碼中注釋掉的代碼，最終成功實現(xiàn)效果：
正確解決方式：
5.柵格/網(wǎng)格布局【待學】
CSS Grid 網(wǎng)格布局教程文章來源：http://www.zghlxwxcb.cn/news/detail-600116.html
6.主、渲染進程之間的通信【待補充】
待補充文章來源地址http://www.zghlxwxcb.cn/news/detail-600116.html
到了這里，關(guān)于2023/07/23的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
