如何使用Vue封装返回顶部组件






然后在需要调用的组件中直接调用使用就ok了不需要传递参数

这里的主要思路是:
1.监听滚动事件利用VUE写一个在控制台打印当前的scrollTop。首先,在 created 钩子中给window添加一个滚动滚动监听事件

2.监听回到顶部按钮距浏览器顶部的距离,滚动的距离如果大于浏览器高度时,设置 toTop 为true,否则就是false

3.点击回到顶部按钮,让距离逐渐减少,形成上划的效果

4.离开该页面需要移除这个监听的事件

注意:因为涉及到滚动,所以页面的内容肯定是要超出可视区的,这里我使用ui li 随便写了一些数据,设置样式,让其超出可视区部分实现滚动

然后在需要的组件直接调用就好了,样式呢可自行设置,为了美观咱们可以使用一些字体库等~

你可能感兴趣的:(如何使用Vue封装返回顶部组件)