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的使用方法。