-
图形验证码的请求方式
this.loginCodeSrc = `${ BASE_API}/code/loginCode?uid=${ this.timeStamp}`; -
倒计时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 = `获取验证码`; } else { that.time = timeL; that.codeTips = `倒计时${ timeL}s`; } }, 1000) }, -
switch-case的优化写法
statusTitleAdapter(status) { let statusMap = { '1': '已下单', '2': '已发货', '3': '已揽件', '4': '运输中', '5': '派送中', '6': '已签收', '7': '' }; return statusMap[status+'']; }, -
修改uview框架中组件默认样式的方式
// /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; } -
导航栏的高度
margin-top: calc(var(--status-bar-height) + 88rpx); -
空格
-
阻止事件透传
@click.native.stop="" -
返回顶部
//返回顶部 backToTop() { uni.pageScrollTo({ scrollTop: 0, duration: 100 }); }, -
text标签文本只显示两行
//文本只显示两行 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; -
uniapp 数组数据修改互相影响是浅拷贝导致的，使用深拷贝进行拷贝即可解决。
-
Git下 查看代码量：git log --author=“ningjianwen” --since=2022-04-11 --before=2022-06-07 --pretty=tformat: --numstat | awk ‘{ add += $1; subs += $2; loc += $1 + $2 } END { printf “added lines: %s, removed lines: %s, total lines: %s\n”, add, subs, loc }’ -;
-
scss模式下 通过以下方式设置带透明度的背景色才生效，less模式下编译报错。
rgba($color: #ffc663, $alpha: 0.4) -
文本超出显示省略号
//超出隐藏 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(); } }, -
格式化日期，计算倒计时的的库 moment，实例方法如下：
//待付款，计算剩余时间 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"; } } -
数组数据删除的时候，不能一边遍历一边删除，虽然程序不会报错，但是删除结果就是会少删除数据。解决办法：
1.）倒序遍历删除，即使有数据删除，也不影响后续数据的遍历和删除。
2.）正序遍历的时候，有数据删除的那次循环，index要减一恢复回去，这样才不会导致数据遍历的时候数据有遗漏。
3.）使用filter进行数据过滤目标数组。
-
使用image时图片的填充模式无论是
widthFix还是heightFix,最好还是设置一下图片的最大宽度或者最大高度，防止用户上传一张异常的图片时，导致页面布局错乱。 -
日期格式化函数（把接收到的日期格式化为「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'); } }, -
页面中部标题向上滑动之后顶部吸顶效果：
&.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文字竖向排布的关键属性：
word-wrap: break-word; -
Uniapp 自带的复制粘贴方法，复制内容时页面跳动的解决方案：
-
export function copyText(text) {
// h5 copy功能
var textareaC = document.createElement('textarea');
textareaC.setAttribute('readonly', 'readonly'); //设置只读属性防止手机上弹出软键盘
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: '复制成功!'
});
return res
}
-
在进行字符串转日期的时候，由于系统的差异性，iOS系统不能识别字符串中间的 ‘-’，需要进行替换，才能获取到正确的值。
let receiptTime = this.orderDetails.receiptTime||''; receiptTime = receiptTime.replace(/-/g, "/"); //解决iOS系统不识别 日期中间的 - 的问题 //确认收货后30天内，还可以进行售后申请 let date1 = new Date(receiptTime).getTime() + 30 * 24 * 60 * 60 * 1000; let date2 = new Date().getTime(); if((date2 - date1) < 0) { return true; } return false;-
两个组件在同一行排布，当发生组件被挤压的情况。可以给被挤压的组件设定一个固定宽度，另外一个组件设置
flex:1%;，让它占据剩余的空间。 -
当使用u-list组件时，要记得设置height，不然会出现列表内容出现在列表内容区域的之外的情况，导致上拉加载事件失效，或者页面上下滑动时出现跳动。
-
数据分页：数据分页的核心点在于能否准确的判断数据是否已经加载完毕了。判断的方法有以下几种：A、服务器端返回总的页数，当数据加载的页数大于等于总页数，说明数据加载完了。B、服务端返回数据的总条数，当获取到的数据条数大于等于总的数据条数时，说明数据已经加载完了。C、当前端每次请求的时候，服务端返回固定页面大小的数据，当某次返回的数据条数小于页面的大小时，说明数据已经加载完了。以上的三种方法，判断总页数和总的数据条数的方法是靠谱的，判断当次返回数据条数小于页面大小的方法准确性不够（因为当服务器出现异常时，某次返回的数据条数小于页面大小，就会被判定为数据已经加载完了）。
-
经典bug。场景：一个页面顶部有多个tab，点击切换tab的时候，共用同一个页面，只是数据刷新（有分页）。
当快速点击tab进行切换的时候，产生了两个tab的数据展示在了同一页的bug（多线程并发）。
-
bug产生的原因：tab切换的时候，由于接口请求是异步的，item-A的数据还在response中处理，item-B的就发出了请求,item-B正好读取了item-A的
this.page += 1的页面，所以在item-B的response中执行了page > 1的数据拼接逻辑，导致了两个item的数据拼接之后现在在了item-B的页面里。
解决办法：1.）把页面加一的操作放在上拉加载更多的方法中。 2.）每个tab-item使用单独的page和list变量。这样就不会出现现成并发的问题。