-
圖形驗(yàn)證碼的請(qǐng)求方式
this.loginCodeSrc = `${BASE_API}/code/loginCode?uid=${this.timeStamp}`;
-
倒計(jì)時(shí)60s
countdown() { let timeL = 60; let that = this; this.codeDisable = true; this.timer = setInterval(() => { timeL--; if (timeL == 0) { clearInterval(that.timer); that.codeDisable = false; that.codeTips = `獲取驗(yàn)證碼`; } else { that.time = timeL; that.codeTips = `倒計(jì)時(shí)${timeL}s`; } }, 1000) }, -
switch-case的優(yōu)化寫法
statusTitleAdapter(status) { let statusMap = { '1': '已下單', '2': '已發(fā)貨', '3': '已攬件', '4': '運(yùn)輸中', '5': '派送中', '6': '已簽收', '7': '' }; return statusMap[status+'']; }, -
修改uview框架中組件默認(rèn)樣式的方式
// /deep/.u-button,u-button 為組件名 /deep/.u-button { display: flex; align-self: center; background-color: #a65342; height: 68rpx; margin: 0 55rpx; font-size: 30rpx; border-radius: 6rpx; color: #FFFFFF; } -
導(dǎo)航欄的高度
margin-top: calc(var(--status-bar-height) + 88rpx); 空格
-
阻止事件透傳
@click.native.stop="" -
返回頂部
//返回頂部 backToTop() { uni.pageScrollTo({ scrollTop: 0, duration: 100 }); }, -
text標(biāo)簽文本只顯示兩行
//文本只顯示兩行 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
uniapp 數(shù)組數(shù)據(jù)修改互相影響是淺拷貝導(dǎo)致的，使用深拷貝進(jìn)行拷貝即可解決。
Git下 查看代碼量：git log --author="ningjianwen" --since=2022-04-11 --before=2022-06-07 --pretty=tformat: --numstat | awk '{ add +=
2; loc +=
2 } END { printf "added lines: %s, removed lines: %s, total lines: %s\n", add, subs, loc }' -;
-
scss模式下 通過以下方式設(shè)置帶透明度的背景色才生效，less模式下編譯報(bào)錯(cuò)。
rgba($color: #ffc663, $alpha: 0.4)
-
文本超出顯示省略號(hào)
//超出隱藏 overflow-x: hidden; //溢出顯示 text-overflow: ellipsis; //文本一行不換行直到遇到換行符 white-space: nowrap;
-
uniapp 返回上一頁的方法：
goback() { let canNavBack = getCurrentPages(); if(canNavBack && canNavBack.length>1) { uni.navigateBack({ delta: 1 }); } else { history.back(); } }, -
格式化日期，計(jì)算倒計(jì)時(shí)的的庫 moment，實(shí)例方法如下：
//待付款，計(jì)算剩余時(shí)間 if (that.orderDetails.orderStatus == '1') { if(that.orderDetails.expirationTime){ let date = that.orderDetails.expirationTime; that.orderDetails["remainingTime"] = this.moment(date).diff(new Date().getTime()); }else{ that.orderDetails["remainingTime"] = "0"; } }
-
數(shù)組數(shù)據(jù)刪除的時(shí)候，不能一邊遍歷一邊刪除，雖然程序不會(huì)報(bào)錯(cuò)，但是刪除結(jié)果就是會(huì)少刪除數(shù)據(jù)。解決辦法：
1.）倒序遍歷刪除，即使有數(shù)據(jù)刪除，也不影響后續(xù)數(shù)據(jù)的遍歷和刪除。
2.）正序遍歷的時(shí)候，有數(shù)據(jù)刪除的那次循環(huán)，index要減一恢復(fù)回去，這樣才不會(huì)導(dǎo)致數(shù)據(jù)遍歷的時(shí)候數(shù)據(jù)有遺漏。
3.）使用filter進(jìn)行數(shù)據(jù)過濾目標(biāo)數(shù)組。
使用image時(shí)圖片的填充模式無論是
widthFix還是heightFix,最好還是設(shè)置一下圖片的最大寬度或者最大高度，防止用戶上傳一張異常的圖片時(shí)，導(dǎo)致頁面布局錯(cuò)亂。-
日期格式化函數(shù)（把接收到的日期格式化為「HH：mm、昨天 HH：mm、MM-dd HH:mm、yyyy-MM-dd HH:mm」）：
formatTime(value) { var format = (function() { function fix(str) { str = '' + (String(str) || ''); return str.length <= 1 ? '0' + str : str; } var maps = { 'yyyy': function(date) { return date.getFullYear() }, 'MM': function(date) { return fix(date.getMonth() + 1); }, 'dd': function(date) { return fix(date.getDate()) }, 'HH': function(date) { return fix(date.getHours()) }, 'mm': function(date) { return fix(date.getMinutes()) }, 'ss': function(date) { return fix(date.getSeconds()) } } var trunk = new RegExp(Object.keys(maps).join('|'), 'g'); return function(value, format) { if (!value) { return '--'; } format = format || 'yyyy-MM-dd HH:mm'; value = Number(value); value = new Date(value); return format.replace(trunk, function(capture) { return maps[capture] ? maps[capture](value) : ''; }); } }) if (value == '' || value == undefined) return '--'; var time = new Date(value), now = new Date(), _time = new Date(value).setHours(0, 0, 0, 0), _now = new Date().setHours(0, 0, 0, 0), duration = 24 * 60 * 60 * 1000; if (_now - _time == 0) { return formatDate(time, 'hh:mm'); } else if (_now - _time == duration) { return "昨天 " + this.formatDate(time, 'hh:mm'); } else if (Math.abs(_now - _time) >= duration && time.getYear() == now.getYear()) { return formatDate(time, 'MM-dd hh:mm'); } else { return formatDate(time, 'yyyy-MM-dd hh:mm'); } },
-
頁面中部標(biāo)題向上滑動(dòng)之后頂部吸頂效果：
&.scrolltop { // position: absolute; // top: 0; // left: 0; position: -webkit-sticky; /* Safari */ position: sticky; top: calc(var(--status-bar-height)); left: 0; z-index: 3; width: 100%; z-index: 999; background: #F7F1E8; }-
text文字豎向排布的關(guān)鍵屬性：
word-wrap: break-word;
-
21. Uniapp 自帶的復(fù)制粘貼方法，復(fù)制內(nèi)容時(shí)頁面跳動(dòng)的解決方案：
export function copyText(text) {
// h5 copy功能
var textareaC = document.createElement('textarea');
textareaC.setAttribute('readonly', 'readonly'); //設(shè)置只讀屬性防止手機(jī)上彈出軟鍵盤
textareaC.value = text; //textarea的value
document.body.appendChild(textareaC); //將textarea添加為body子元素
textareaC.select();
var res = document.execCommand('copy');
document.body.removeChild(textareaC);//移除DOM元素
uni.showToast({
icon: 'success',
title: '復(fù)制成功!'
});
return res
}
-
在進(jìn)行字符串轉(zhuǎn)日期的時(shí)候，由于系統(tǒng)的差異性，iOS系統(tǒng)不能識(shí)別字符串中間的 ‘-’，需要進(jìn)行替換，才能獲取到正確的值。
let receiptTime = this.orderDetails.receiptTime||''; receiptTime = receiptTime.replace(/-/g, "/"); //解決iOS系統(tǒng)不識(shí)別 日期中間的 - 的問題 //確認(rèn)收貨后30天內(nèi)，還可以進(jìn)行售后申請(qǐng) let date1 = new Date(receiptTime).getTime() + 30 * 24 * 60 * 60 * 1000; let date2 = new Date().getTime(); if((date2 - date1) < 0) { return true; } return false;兩個(gè)組件在同一行排布，當(dāng)發(fā)生組件被擠壓的情況?？梢越o被擠壓的組件設(shè)定一個(gè)固定寬度，另外一個(gè)組件設(shè)置
flex:1%;，讓它占據(jù)剩余的空間。當(dāng)使用u-list組件時(shí)，要記得設(shè)置height，不然會(huì)出現(xiàn)列表內(nèi)容出現(xiàn)在列表內(nèi)容區(qū)域的之外的情況，導(dǎo)致上拉加載事件失效，或者頁面上下滑動(dòng)時(shí)出現(xiàn)跳動(dòng)。
數(shù)據(jù)分頁：數(shù)據(jù)分頁的核心點(diǎn)在于能否準(zhǔn)確的判斷數(shù)據(jù)是否已經(jīng)加載完畢了。判斷的方法有以下幾種：A、服務(wù)器端返回總的頁數(shù)，當(dāng)數(shù)據(jù)加載的頁數(shù)大于等于總頁數(shù)，說明數(shù)據(jù)加載完了。B、服務(wù)端返回?cái)?shù)據(jù)的總條數(shù)，當(dāng)獲取到的數(shù)據(jù)條數(shù)大于等于總的數(shù)據(jù)條數(shù)時(shí)，說明數(shù)據(jù)已經(jīng)加載完了。C、當(dāng)前端每次請(qǐng)求的時(shí)候，服務(wù)端返回固定頁面大小的數(shù)據(jù)，當(dāng)某次返回的數(shù)據(jù)條數(shù)小于頁面的大小時(shí)，說明數(shù)據(jù)已經(jīng)加載完了。以上的三種方法，判斷總頁數(shù)和總的數(shù)據(jù)條數(shù)的方法是靠譜的，判斷當(dāng)次返回?cái)?shù)據(jù)條數(shù)小于頁面大小的方法準(zhǔn)確性不夠（因?yàn)楫?dāng)服務(wù)器出現(xiàn)異常時(shí)，某次返回的數(shù)據(jù)條數(shù)小于頁面大小，就會(huì)被判定為數(shù)據(jù)已經(jīng)加載完了）。
-
經(jīng)典bug。場景：一個(gè)頁面頂部有多個(gè)tab，點(diǎn)擊切換tab的時(shí)候，共用同一個(gè)頁面，只是數(shù)據(jù)刷新（有分頁）。
當(dāng)快速點(diǎn)擊tab進(jìn)行切換的時(shí)候，產(chǎn)生了兩個(gè)tab的數(shù)據(jù)展示在了同一頁的bug（多線程并發(fā)）。
bug產(chǎn)生的原因：tab切換的時(shí)候，由于接口請(qǐng)求是異步的，item-A的數(shù)據(jù)還在response中處理，item-B的就發(fā)出了請(qǐng)求,item-B正好讀取了item-A的
this.page += 1的頁面，所以在item-B的response中執(zhí)行了page > 1的數(shù)據(jù)拼接邏輯，導(dǎo)致了兩個(gè)item的數(shù)據(jù)拼接之后現(xiàn)在在了item-B的頁面里。
解決辦法：1.）把頁面加一的操作放在上拉加載更多的方法中。 2.）每個(gè)tab-item使用單獨(dú)的page和list變量。這樣就不會(huì)出現(xiàn)現(xiàn)成并發(fā)的問題。
