Vue
定位(float 、 position等)会脱离文档流,即对div判定高度会有影响。可以在需要定位的div中再套一层div,在父div中clear:both,或者修改需要定位的div属性从float改到text-align
route跳转
1 | this.$router.push({ |
- 多个$axios嵌套会导致异步问题,换成ajax就可以了
1 | this.$jquery.ajax({ |
- for循环获取元素id
1 | for(var i = 0; i < len; i++){ |
- 如果对 对象、数组等非直接变量查询赋值之后页面没有刷新
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 | var prctrSet = new Set(); |
“v-show”所包含的组件也会在呈现页面的时候获取数据
页面第一次显示数组中的数据(以json形式存储)的时候,可能会因为没有key值而报错,导致整个页面无法呈现。所以需要在初始化的时候把数组全部key值写出来,value写空
div中的文字垂直居中
1 | parentElement{ |
- 阻止旋转屏幕时自动调整字体大小
移动端开发时,屏幕有竖屏和横屏模式,当屏幕进行旋转时,字体大小则有可能会发生变化,从而影响页面布局的整体样式,为避免此类情况发生,只需设置如下样式即可
1 | * { |
- 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; |