最后

小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

虽只说了一个公司的面试，但我们可以知道大厂关注的东西并举一反三，通过一个知识点延伸到另一个知识点，这是我们要掌握的学习方法，小伙伴们在这篇有学到的请评论点赞转发告诉小编哦，谢谢大家的支持！

required: true

},

autoplay: {

type: Boolean,

default: true

},

loop: {

type: Boolean,

default: true

}

},

data () {

return {

lottie: null

}

},

mounted () {

this.intLottie()

},

methods: {

intLottie () {

const { animationData, autoplay, loop } = this

this.lottie = lottie.loadAnimation({

container: this.$el, // 渲染容器

renderer: ‘svg’, // 渲染方式 svg|canvas|html

loop, // 是否循环 true|false|number

autoplay, // 自动播放 true|false

animationData // lottie json文件

})

}

}

}

在页面引用组件，可以去[官方社区](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)下载动画json

这样一个lottie动画就出来了

![在这里插入图片描述](https://img-blog.csdnimg.cn/4c32b323eb2e41fea5608366d6fdd248.gif#pic_center)

下面结合lottie的一些实例方法，将我们的lottie组件添加鼠标事件，[官方文档](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)

html部分修改

methods部分修改

methods: {

intLottie () {

let { animationData, autoplay, loop } = this

if (!autoplay) {

// 这里交互播放不循环

loop = false

}

this.lottie = lottie.loadAnimation({

container: this.$el, // 渲染容器

renderer: ‘svg’, // 渲染方式

loop, // 是否循环

autoplay, // 自动播放

animationData // lottie json文件

})

},

onMouseenter () {

// 我这里demo，非自动播放则判断为鼠标交互播放，具体封装根据自身业务场景来

if (!this.autoplay) {

this.lottie.setDirection(1)

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】