VUE
1. vue 滚动行为用法,进入路由需要滚动到浏览器底部 头部等等
使用场景：使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。
使用 vue-router提供的scrollBehavior方法实现
2. setInterval 在路由跳转后继续运行并没有及时进行销毁
使用场景：比如一些弹幕，走马灯文字，这类需要定时调用的，路由跳转之后，因为组件已经销毁了，但是setInterval还没有销毁，还在继续后台调用，控制台会不断报错，如果运算量大的话，无法及时清除，会导致严重的页面卡顿。
在组件生命周期beforeDestroy停止setInterval
3. vue中 通过vue-router a组件跳转到b组件a组件内的绑定的事件会影响b组件吗？
答：组件中methods中绑定的事件会被销毁.(但是绑定给window的事件如果不手动销毁会一直存在。)
4. vue中 通过vue-router a组件绑定在window上的事件会影响b组件吗？（说出原因）
答：会影响，因为vue是单页面应用,绑定在全局的事件，例如滚动事件。如果在组件销毁时不手动解绑，事件会一直存在。
mounted() {
window.addEventListener('scroll', this.handleScroll)
}
unmounted() {
// 解绑全局事件，否则会在所有页面都触发这个事件，这就需要解绑。
window.removeEventListener('scroll', this.handleScroll)
}
5. vue 实现PC端自定义滚动条 ** 兼容火狐 **
CSS
1. css中::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用
- 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素
- 用于区分伪类和伪元素
2. 在IE9中不支持css的transition和CSS动画，想实现一个缓动效果要怎么实现？
可以使用js定时器或者使用jquery的animate方法
JS
1. 切换背景图片出现闪屏
答：图片资源未加载完成，先加载再进行切换。
let img = new Image();
img.src = xxx.jpg;
img.onload = function () {
//图片加载完成再进行切换
}
2. JS禁用鼠标滚轮滚动页面
答：图片资源未加载完成，先加载再进行切换。
<body>
<div id="big-box">...</div>
</body>
//取消默认事件
let bigBox = document.querySelector("#big-box");
function stopDefault(e) {
if (e.preventDefault) {
e.preventDefault();
e.stopPropagation();
} else {
window.event.returnValue = false;
e.cancelBubble = true;
}
return false;
}
/* 以下的 bigBox为页面中最外层盒子
经测试绑定在body，html或者window上滚动会一直报这个错误
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>（由于目标被视为被动，无法在被动事件监听器中阻止缺省事件。）
*/
//开放滚动
function startwheel() {
bigBox.removeEventListener('DOMMouseScroll', function (e) {
var e = e || window.event;
stopDefault(e);
}, false);
bigBox.onmousewheel = null;
}
//禁用滚动
function stopwheel() {
var str = window.navigator.userAgent.toLowerCase();
if (str.indexOf('firefox') !== -1) { //火狐浏览器
bigBox.addEventListener('DOMMouseScroll', function (e) {
var e = e || window.event;
//阻止窗口默认的滚动事件
stopDefault(e);
}, false);
} else { //非火狐浏览器
bigBox.onmousewheel = function (ev) {
var e = ev || window.event;
stopDefault(e);
};
}
}
网友评论