vue篇-better-scroll

BetterScroll简单使用

<template>
<div class="wrapper">
   <ul class="content">
     <button @click='btnClick'>按钮</button>
    <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>
</div>
 
</template>

<script>
import BScroll from 'better-scroll'
  export default {
    name: "Category",
    data() {
      return {
        scroll:null
        
      }
    },
    created() {
      // 在这里拿不到dom
    
    },
    mounted() {
        this.scroll = new BScroll(document.querySelector('.wrapper'),{
          // probeType:2 在手指滚动的过程中侦测,手指离开后的惯性不侦测
          //  3 只要是滚动都监听
          probeType:3,//监听位置
          pullUpLoad:true,  //到底部上拉加载
          click:true //里面的div需要被点击

        })
        this.scroll.on('scroll',(position) => {
          console.log(position);
        })
        this.scroll.on('pullingUp',() => {
          console.log('加载更多');
        })
    },
    methods: {
      btnClick()  {
        console.log('11');
      }
     
    },
  }
</script>

<style scoped>
.wrapper{
  height: 150px;
  background-color: red;
  overflow: hidden;

}

</style>

BetterScroll回到顶部

<scroll class="content" ref="scroll"></scroll>
   backClick(){
      //  500毫秒回到顶部
      // this.$refs.scroll.scroll.scrollTo(0,0,500)
 
  }
/

better-scroll - GitHub地址