1、swiper获取数据、css都没有问题,但图片不动,应该怎么解决?
Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架,使用硬件加速过渡(如果该设备支持的话)。主要使用于移动端的网站、移动web apps,native apps和hybrid apps。主要是为IOS而设计的,同时,在Android、WP8系统也有着良好的用户体验,Swiper从3.0开始不再全面支持PC端。因此,如需在PC上兼容更多的浏览器,可以选择Swiper2.x(甚至支持IE7)。
话不多说,直接上代码。
从swiper入手
var mySwiper = new Swiper ('.swiper-container', {
loop:true ,
speed: 300,
autoplay: 3000, //间隔时间
observer:true,// 当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper
observerParents:true// 将observe应用于Swiper的父元素。当Swiper的父元素变化时,例如window.resize,Swiper更新
// 如果需要分页器
pagination : '.pagination'
})
很简单一个轮播图就实现了~
2、子组件能不能修改父组件传递过来的数据?
父子组件传值时,父组件传递的参数,数组和对象,子组件接受之后可以直接进行修改,并且会传递给父组件相应的值也会修改。
如果传递的值是字符串,直接修改会报错。(使用v-model传值,修改input里面的值,会报错)
不推荐子组件直接修改父组件中的参数,避免这个参数多个子组件引用,无法找到造成数据不正常的原因。
3、px、em、rem的区别
px:固定的像素,不能自适应页面大小.
rem:相对于根元素(根元素是html).
em:相对于父元素.
4、清除浮动的方式有哪些?最优的事哪一种?
(1)给父级元素单独定义高度(height)
原理:如果父级元素没有定义高度,父元素的高度完全由子元素撑开时,父级div手动定义height,就解决了父级div无法自动获取到高度的问题。
优点:简单、代码少、容易掌握。
缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题。对于响应式布局会有很大影响。
(2)在标签结尾处加空div标签 clear:both
原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度。
优点:简单、代码少、浏览器支持好、不容易出现怪问题
缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,不利于页面的优化。
(3)父级div定义 伪类:after 和 zoom ------------比较支持
原理:元素生成伪类的作用和效果相当于方法2中的原理,但是IE8以上和非IE浏览器才支持:after,zoom(IE转有属性)可解决ie6,ie7浮动问题
优点:浏览器支持好、不容易出现怪问题,写法是固定的,不理解也可以直接复制使用;(小编大力推荐使用此种方法,简单便捷,只需添加一个class即可解决问题)
缺点:css代码多、不少初学者不理解原理,要两句代码结合使用才能让主流浏览器都支持。
4)父级div定义 overflow:hidden
优点:简单、代码少、浏览器支持好
缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。(不建议使用此种方式,可能会影响页面元素布局)
5,父级div定义 overflow:auto
原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度
优点:简单、代码少、浏览器支持好
缺点:内部宽高超过父级div时,会出现滚动条。
建议:不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。
5、css优先级算法如何计算?有什么不同?
优先级就近原则,同权重情况下样式定义最近者为准;
载入样式以最后载入的定位为准;
优先级为:!important > id > class > tag
important比内联优先级高(style)
6、readonly和disabled的区别
这两种写法都会使显示出来的文本框不能输入文字,但disabled会使文本框变灰,而且通过通过表单提交时,获取不到文本框中的value值(如果有的话),而readonly只是使文本框不能输入,外观没有变化,而且表单提交时不影响获取value值。
注意:
Readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效,包括select, radio, checkbox, button等。
7、浏览器中的回流和重绘是什么,分别在什么情况下触发?
重绘(repaint)和回流(reflow)
文档初次加载时,HTML解析器会解析元素构建DOM树,CSS解析器将样式解析为样式结构体,之后通过DOM树和样式结构体构建渲染树,渲染树具有样式属性。然后遍历渲染树的每个渲染器将器布局到页面,最后浏览器将器绘制到页面。
重绘:当元素的外观或外观可见性(visibility)发生变化时会触发重绘
回流:render树中的部分或全部因为元素的规模尺寸、布局、隐藏等改变,需要重新计算render树。
回流时,浏览器会使渲染树中受影响的部分失效,然后重新构造这部分的render树。完成回流之后浏览器会重新布局、绘制受影响的部分到屏幕中,该过程就是重绘。所以回流必定会引起重绘,但重绘不一定引起回流。
每个页面至少需要一次回流,就是页面第一次加载时。回流变化涉及到部分页面(或整个页面)的布局。一个元素的回流导致其所有子元素以及DOM中紧随其后的祖先元素和其子元素都发生回流。
是什么导致回流呢?
(1) 调整窗口大小----发生resize事件时
(2) 元素位置改变
(3) 元素尺寸改变——边距、填充、边框、高度和宽度
(4) 内容改变——比如文本字体或图片大小改变而引起的宽度和高度改变
(5) 页面渲染初始化
(6) 添加或删除可见的DOM元素
避免回流和重绘方法
减少回流、重绘其实就是需要减少对render tree的操作,并减少对一些style信息的请求,尽量利用好浏览器的优化策略
(1) 避免操作DOM,创建一个documentFragment或div,在它上面应用所有DOM操作,最后再把它添加到window.document。也可以在一个display:none的元素上进行操作,最终把它显示出来。因为display:none上的DOM操作不会引发回流和重绘。
(2) 让要操作的元素进行"离线处理",处理完后一起更新,这里所谓的"离线处理"即让元素不存在于render tree中。如读取offsetLeft等属性。
(3) 尽可能在DOM树的末端改变class ,尽可能在DOM树的里面改变class,可以限制回流的范围,使其影响尽可能少的节点。
(4) 避免设置多层内联样式,因为每一个都会造成回流,样式合并在一个外部类,这样当该元素的class属性被操作时,只会产生一个reflow。
(5) 将需要多次回流的元素position属性设为absolute或fixed,这样该元素就会脱离文档流,它的变化不会影响其他元素变化。比如动画效果应用到position属性为absolute或fixed的元素上。
(6) 牺牲平滑度换取速度,动画元素每次移动3像素可能在非常快的机器上看起来平滑度低了,但它不会导致CPU在较慢的机器和移动设备中抖动
(7) 避免使用table布局,在布局完全建立之前,table需要很多关口,table是可以影响之前已经进入的DOM元素的显示的元素。即使一些小的变化和会导致table中所有其他节点回流。
(8) 避免使用css的JavaScript表达式,该规则较过时,但是个好主意。因为每次都需要重新计算文档,或部分文档、回流。