共计 5007 个字符,预计需要花费 13 分钟才能阅读完成。
-
图形验证码的申请形式
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;
-
21. 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 变量。这样就不会呈现现成并发的问题。