backtotop组件
这是一个比较简单的组件 实现功能是当scroll下滑到一定距离时 出现backToTop的图标 点击图标时 上滑到顶端 注意的是 当scroll下滑到一定距离时 出现backToTop的图标这个功能是在元素挂载好之后实现 因此放在mounted钩子函数里面 当组件被销毁前 要解绑 scroll 所以在beforeDestory 钩子函数里面 $(window).off('scroll')
直接上代码吧
<script> import $ from 'webpack-zepto' export default { data () { return { show: true } }, mounted () { $(window).on('scroll', () => { if ($(window).scrollTop() > 100) { this.show = true } else { this.show = false } }) }, beforeDestroy () { $(window).off('scroll') }, methods: { backtop () { $(window).scrollTop(0) this.show = false } } } </script>