backtotop组件

最新推荐文章于 2025-02-13 17:19:40 发布

weixin_30500663

最新推荐文章于 2025-02-13 17:19:40 发布

阅读量498

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/love-yangerlei/p/7884619.html

　　这是一个比较简单的组件实现功能是当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>

转载于:https://www.cnblogs.com/love-yangerlei/p/7884619.html