实现一个返回顶部的按钮功能（基于better-scroll实现）

better-scroll:是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。

gitHub地址：https://github.com/ustbhuangyi/better-scroll

中文文档：https://better-scroll.github.io/docs/zh-CN/

在vue项目中使用，最好的引入方法是通过npm安装，然后在进行使用。

npm install @better-scroll/core --save

注意，在使用时，要有一个wrapper容器，wrapper容器里面包裹着content容器，滚动的内容是content里面的内容。

实现一个返回顶部的按钮功能

1.首先写一个backTop组件（backTop.vue）

<template>
  <div class="back-top">
      <img src="~assets/img/common/top.png" alt="">
  </div>
</template>

<script>
    export default {
        name:'BackTop',
    }
</script>

<style>
    .back-top{
        position: fixed;
        right: 8px;
        bottom: 55px;
    }
    .back-top img{
        width: 43px;
        height: 43px;
    }
</style>

2.由于better-scroll插件可能之后会被遗弃或者作者不在更新维护，所以将better-scroll封装成一个组件，better-scroll.vue

<template>
  <div class="wrapper" ref='wrapper'>
    <div>
        <slot></slot>
    </div>
  </div>
</template>

<script>
import BScroll from '@better-scroll/core'
export default {
name:'Scroll',
props:{
    probeType:{
        type:Number,
        default:0
    },
     pullUpLoad:{
        type:Boolean,
        default:true
    }
},
data(){
    return {
        scroll:null
    }
},
mounted(){
    this.scroll = new BScroll(this.$refs.wrapper,{
        click:true,
        probeType:this.probeType,
        scrollY: true,
        observeImage:true
    })
    // 监听滚动的位置
    this.scroll.on('scroll',(position) => {
        // console.log(position);
        this.$emit('scroll',position)
    })
    }
}
</script>

<style>

</style>

3.完成需要使用backTop组件的页面

<template>
  <div>
    <nav-bar>
      <div slot="left"><</div>
      <div slot="center">分类</div>
      <div slot="right">更多</div>
    </nav-bar>
    <scroll class="content" ref='scroll' :probe-type='3'  @scroll='contentScroll'>
     <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li>20</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
      <li>24</li>
      <li>25</li>
      <li>26</li>
      <li>27</li>
      <li>28</li>
      <li>29</li>
      <li>30</li>
      <li>31</li>
      <li>32</li>
      <li>33</li>
      <li>34</li>
      <li>35</li>
      <li>36</li>
      <li>37</li>
      <li>38</li>
      <li>39</li>
      <li>40</li>
      <li>41</li>
      <li>42</li>
      <li>43</li>
      <li>44</li>
      <li>45</li>
      <li>46</li>
      <li>47</li>
      <li>48</li>
      <li>49</li>
      <li>50</li>
      <li>51</li>
      <li>52</li>
      <li>53</li>
      <li>54</li>
      <li>55</li>
      <li>56</li>
      <li>57</li>
      <li>58</li>
      <li>59</li>
      <li>60</li>
      <li>61</li>
      <li>62</li>
      <li>63</li>
      <li>64</li>
      <li>65</li>
      <li>66</li>
      <li>67</li>
      <li>68</li>
      <li>69</li>
      <li>70</li>
      <li>71</li>
      <li>72</li>
      <li>73</li>
      <li>74</li>
      <li>75</li>
      <li>76</li>
      <li>77</li>
      <li>78</li>
      <li>79</li>
      <li>80</li>
      <li>81</li>
      <li>82</li>
      <li>83</li>
      <li>84</li>
      <li>85</li>
      <li>86</li>
      <li>87</li>
      <li>88</li>
      <li>89</li>
      <li>90</li>
      <li>91</li>
      <li>92</li>
      <li>93</li>
      <li>94</li>
      <li>95</li>
      <li>96</li>
      <li>97</li>
      <li>98</li>
      <li>99</li>
      <li>100</li>
    </ul>
    </scroll>
    <back-top v-show='isShow' class="back-top" @click.native='backClick'></back-top>

  </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar'
import Scroll from 'components/common/scroll/Scroll'
import BackTop from 'components/content/backtop/BackTop'
export default {
  name:'Category',
  data(){
    return {
      isShow:false
    }
  },
  components:{
    NavBar,
    Scroll,
    BackTop
  },
  methods:{
    backClick(){
      console.log(this.$refs.scroll.scroll);
      this.$refs.scroll.scroll.scrollTo(0,0,500)
    },
    contentScroll(position){
      this.isShow = -position.y > 500
    },
  }
}
</script>

<style>
.content{
  height: 450px;
  background-color: aqua;
  overflow: hidden;
}
</style>

效果图：

初始状态

页面滑动到高度300以上，出现回到顶部的按钮

点击按钮，页面内容即可回到顶部位置。

 

 

better-scroll插件是一个很不错的插件，可以实现很多与页面滚动有关的功能，比如上拉加载更多，移动端页面优雅的滚动等功能，可以阅读官网学习更多关于better-scroll的使用方法。