返回顶部组件的设计和实现

页面设计思路

App不添加回到顶部功能,网站添加回到顶部的功能.
理由是网站的空间够大,添加一个回到顶部的功能不碍事,也确实能方面用户.
而App的空间太小,添加一个回到顶部的功能影响页面美观还影响用户操作.

用户向下滚动一点就应该显示回到顶部功能
首先,如果本来就在顶部,是没有必要显示的.
如果滚动太长才显示,那么用户缺失了一部分自由选择的空间.
滚动一点就显示,不管用户用不用,至少有自由选择的空间.

当然有一些页面也不添加回到顶部的功能，他们的设计思维是限制页面高度.
如果页面的高度让回到顶部只需要滚动一下,其实也可以不添加回到顶部功能.

返回顶部组件的实现

1.封装一个返回顶部组件.
由于返回顶部组件是一个可跨项目的组件,所以划分到components的common文件夹中.

2.实现显示/消失功能
Better-Scroll方案
1.开启probeType:2 实时监听滚动的位置,该属性派发scroll事件.
2.通过this.scroll.on(‘scroll’,function(position){})监听事件,position参数为当前滚动位置.
3.通过function发送事件和参数
4.在父组件中接收该事件.
5.事件函数利用position.y和显示边界位置做一个布尔值判断.
6.用一个变量接收布尔值
7.组件用v-show和该变量判断是显示还是消失.

3.实现回到顶部功能
Better-Scroll方案
1.封装backTop函数,内部获取bs对象,使用bs.scrollTo(0,0,time)方法.
2.添加点击事件,组件需要加.native来使用原生点击事件.@click.natice=‘backTop’