实现一个返回顶部的按钮功能（基于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的使用方法。

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

使用 React Hooks实现一个返回顶部的按钮
[回到顶部]是许多网页非常常用的按钮,通常放在长页面的右下角,点击可以直接让页面回到顶端. 要实现这个组件,需要以下几个要点: 设置定位按钮定位设置为position: fixed,并且设置位置到屏 ...
axure下移固定地方_axure固定元件位置教程：使用axure动态面板制作一个返回顶部的按钮...
许多网站上都有一个"返回页首"按钮.无论屏幕如何滚动,"返回顶部"按钮始终浮动在固定位置,随时可用.一旦点击它,他就像一个小小的火箭,摇晃起来,页面将返回页面顶 ...
移动端的返回顶部悬浮按钮还需要存在吗？
一. 返回顶部悬浮按钮的出现返回顶部悬浮按钮大家都不陌生,在pc端浏览网页的时候都会在右下角出现,方便用户点击后直接返回到顶部.产品功能都是为了解决用户的需求而出现的,返回顶部悬浮按钮也是如此.那么 ...
HTML点击元素页面回到顶部,博客园页面添加返回顶部 TOP 按钮
博客园页面添加返回顶部 TOP 按钮 TOP 按钮进入网页管理 -> 设置在 "页面定制 CSS 代码" 中添加如下 CSS 样式, 当然你可以改为自己喜欢的样式此处可 ...
【前端】HTML底部返回顶部悬浮按钮
CSS样式: .back-to {bottom: 55px;overflow: hidden;position: fixed;right: 10px;width: 110px;z-index: 999 ...
jquery 实现返回顶部功能
1. html 中添加一个返回顶部的按钮,本例中采用了一个绝对定位的div,(position:fixed),背景色给了一定的透明度,并加入一个向上的箭头icon. 2. 绑定window 的scro ...
js编写简易返回顶部按钮
之前ui设计让我做个返回顶部的按钮,我一定头绪都没,感觉真要加上这个功能,自己编写就得一个下午,工作量大为由,所以就推脱了; 当静下心,有时间捣鼓之后才发现原来so easy!!! 以下是我的js代码 ...
手机端html返回顶部,移动端H5页面返回顶部按钮无效问题的解决
一直都是在PC端写返回顶部的按钮,今天的项目是移动端,页面内容比较多,也有滚动顶部的功能,于是一开始用了原生的的写法,没有用,经过调试,滚动时获取不到滚动的高度.接着又换了一个gototop.js插件 ...
返回顶部的js实现(jQuery/MooTools)
一.引言在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮.例如: 如果你看到这段文字,说明转自<一棵树-博客园>,原文链接:http://www.cnb ...
仿新浪微博返回顶部的js实现(jQuery/MooTools)
一.引言在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮.例如: 其中淘宝网的是要滚动条的滚动距离大于某一段距离才显示返回顶部按钮:人人网的返回顶部直接在底部的工具 ...

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

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

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

最新文章

热门文章