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>

  

posted @ 2017-11-23 14:06  summercyz  阅读(517)  评论(0编辑  收藏  举报