Vue
定位（float 、 position等）会脱离文档流，即对div判定高度会有影响。可以在需要定位的div中再套一层div，在父div中clear：both，或者修改需要定位的div属性从float改到text-align
route跳转
1
2
3
4
5
6
7
8
9
| this.$router.push({
path: '/second/Build_Detail',
query: {
stageIndex: index
}
});
# 下一个页面获取参数
Index: this.$route.query.stageIndex
|
- 多个$axios嵌套会导致异步问题，换成ajax就可以了
1
2
3
4
5
6
7
8
9
10
11
12
| this.$jquery.ajax({
type: 'post',
dataType: 'json',
url: '/',
data: {
dataTable: "",
},
async: false, // false是同步
success:function (response) {
var data = response.data;
console.log(data);
})
|
- for循环获取元素id
1
2
3
4
| for(var i = 0; i < len; i++){
var str = "#bt" + "_" + i; // #bt_1
$(str).removeClass("button_act");
}
|
- 如果对 对象、数组等非直接变量查询赋值之后页面没有刷新
1
| this.object = JSON.parse(JSON.stringify(this.object));
|
通过使用JSON先转换再解析的方式，可以骗浏览器这是一个新的对象，就可以实现局部渲染。如果页面是通过循环来输出对象中的值那就并不需要这一步。
- 动态计算进度条宽度
1
| <div class="color" :style="{ width : done != '-' ? (done > all) ? '100%' : (done*100/all) + '%' : '0%'}"></div>
|
- 通过 Set() 去重，然后转换成数组
1
2
3
4
5
| var prctrSet = new Set();
for (var i = 0; i < data.length; i++) {
prctrSet.add(data[i].prctr);
}
this.prcArray = Array.from(prctrSet);
|
“v-show”所包含的组件也会在呈现页面的时候获取数据
页面第一次显示数组中的数据（以json形式存储）的时候，可能会因为没有key值而报错，导致整个页面无法呈现。所以需要在初始化的时候把数组全部key值写出来，value写空
div中的文字垂直居中
1
2
3
4
5
6
7
8
9
| parentElement{
position:relative;
}
childElement{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
|
- 阻止旋转屏幕时自动调整字体大小
移动端开发时，屏幕有竖屏和横屏模式，当屏幕进行旋转时，字体大小则有可能会发生变化，从而影响页面布局的整体样式，为避免此类情况发生，只需设置如下样式即可
1
2
3
| * {
-webkit-text-size-adjust: none;
}
|
- iOS 下取消 input 在输入的时候英文首字母的默认大写
1
| <input type="text" autocapitalize="none">
|
- 禁止 iOS 识别长串数字为电话
1
| <meta name="format-detection" content="telephone=no" />
|
- 禁止 iOS 弹出各种操作窗口
1
| -webkit-touch-callout: none;
|
- 禁止 ios 和 android 用户选中文字
1
| -webkit-user-select: none;
|
- 浮动子元素撑开父元素盒子高度
解决方法如下：
1. 父元素设置为 overflow: hidden;
2. 父元素设置为 display: inline-block; 等
这里两种方法都是通过设置css属性将浮动元素的父元素变成间接变成BFC元素，然后使得子元素高度可以撑开父元素。这里需要注意的时，最好使用方法1， 因为inline-block元素本身会自带一些宽高度撑开其本身。
- 往返缓存问题
点击浏览器的回退，有时候不会自动执行js，特别是在mobilesafari中。这与往返缓存(bfcache)有关系。 解决方法 ：
1
| window.onunload = function () {};
|
- overflow-x: auto 在iOS有兼容问题; 滑动卡顿
1
| -webkit-overflow-scrolling: touch;
|