1.vue视图更新问题
// 使用this.$set触发不了数组视图更新,使用数组的splice触发视图
this.$set(this.see, i, true) ×
this.see.splice(i, 0, true) √
// this.$nextTick()里面修改数组push视图不更新,去掉之后却能(原因未知,可能跟批更新有关系)。总结:不要滥用$nextTick。
2.html表格样式复写
// 表格样式复写不要使用 border-collapse: collapse;合并边框,不然想要给表格加圆角会导致冲突无法实现。
// 正确做法:不使用 border-collapse: collapse; 使用 border-spacing: 0;设置相邻单元格边框之间的距离(前提:border-collapse: separate;默认),然后中间的表格样式由td设置边框实现,多余的则要去掉。
.hr-m-table {
width: 6.14rem;
border-spacing: 0;
border-radius: 0.25rem;
border: 0.01rem solid #EDEFF7;
box-sizing: border-box;
}
.hr-m-table td {
border-bottom: 0.01rem solid #EDEFF7;
border-right: 0.01rem solid #EDEFF7;
font-size: 0.21rem;
font-weight: 400;
color: #242733;
padding: 0.17rem 0 0.17rem 0.17rem;
}
.hr-m-table tr:last-child td {
border-bottom: 0;
}
.hr-m-table tr td:last-child {
border-right: 0;
}
3.移动端vant textarea不可滑动
// 在webview中van-field的textarea区域滑动(touchmove)失效,除textarea以外的内容均可触发滑动事件。
// 解决弹出层备注框touch导致页面不能滑动的问题
window.addEventListener('touchmove', (e) => {
let target = e.target
if (target && target.tagName === 'TEXTAREA') {
e.stopPropagation();
}
}, true)