better-scroll:是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。
gitHub地址：/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的使用方法。
