Vue 中的 v-cloak 解读
v-cloak主要是为了解决加载页面的时候出现{{&……}}的情况,用法也非常简单,下面是自己在项目中的实现
用法:这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
<div class="mui-content" id="app" v-cloak>
</div>
css文件:
[v-cloak]{
display:none;
}
webview打开的页面会有闪烁
解决方法:关键是一个参数的配置,直接看代码
var repertoryHtml = plus.webview.create("repertory_matter_gp.html", "repertoryId", {
width: '100%',
height: '100%',
margin: "auto",
scalable: false,
hardwareAccelerated: false //对,就是这个配置,要设置为false
}, {
reqDetailId: reqDetailId,
warehouseList: warehouseList
});
加载中的实现
/**
* 显示加载中
* @param {Object} msg
*/
function wlbLoading(msg) {
plus.nativeUI.showWaiting(msg);
}
关闭加载
/**
* 关闭加载中提示
*/
function wlbLoadingClose() {
plus.nativeUI.closeWaiting();
}
首先页面刚开始执行的时候就放下面这段代码
//加载中提示框
wlbLoading("加载中");//这个是在另一个页面中已实现
然后在页面请求成功之后写:ps:注意是请求成功后再添加这个哦~
setTimeout(function () {
mui('.mui-numbox').numbox();
//关闭加载中提示
wlbLoadingClose();
}, 0);
这里也解决了,加减号点击没有效果的bug。
其他同事踩过的坑
- mui下拉刷新,因为mui版本太低,没有出来效果,将mui替换之后可以使用啦
- 今天黎哥提到一点,就是手机调试方面,如果能够用jQuery的
$(document).ready(function(){})