Vue项目better-scroll使用小结

wengege001
3,898 阅读3分钟

在移动端的项目中，我们会遇到各种各样的滚动场景的需求，better-scroll就是一款可以解决该问题的插件。

1，直接GitHub上找到better-scroll组件，然后使用npm进行下载。附上GitHub地址github.com/ustbhuangyi…。

2，在项目中使用。

应用场景一：滚动列表。

通常html结构

<div class="wrapper>  
<ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
  <!-- 这里可以放一些其它的 DOM，但不会影响滚动 -->
</div>

<div class="menu-wrapper" ref="menuWrapper"> 
    <ul>
        <li v-for="item in goods" class="menu-item">
            <span class="text">
               <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}
        </span>
        </li>
    </ul>
   </div>

下面的为我自己项目中的HTML代码块。可以看出class为menu-wrapper是外层包裹，内层的ul可以再里面进行滚动。

接下来看JS的代码。官方给的是：

import BScroll from 'better-scroll'
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper)

better-scroll 提供了一个类，实例化的第一个参数是一个原生的 DOM 对象。当然，如果传递的是一个字符串，better-scroll 内部会尝试调用 querySelector 去获取这个 DOM 对象

但是在实际的项目中，我是这样做的，在对应的 .vue文件的script中先引入better-scroll组件，和官方的第一句一致。

<script type="text/ecmascript-6">
import BScroll from 'better-scroll'

接下来在methods方法中，进行定义该滚动的方法：

 methods : {
   _initScroll() {
     this.menuScroll = new BScroll(this.$refs.menuWrapper,{})
     this.foodScroll = new BScroll(this.$refs.foodWrapper,{})
   }
 
 }

由于在vue2.X的版本废除了v-el和v-ref。而通用为ref属性，就在上文HTML结构中ref=“menu-wrapper”。所以可以用this.$refs.menuWrapper可以来进行查找DOM文件中的<div class="menu-wrapper" ref="menuWrapper">。

这里有一点要注意的，不要用menu-wrapper和this.$refs.menuWrapper。因为这样查找的话会找不到对应的DOM文件结构。

这样就可以实现滚动列表啦。

应用场景二：better-scroll 配合 Vue 实现下拉刷新或上拉加载功能

直接上代码结构：

<template>
  <div class="wrapper" ref="wrapper">
    <ul class="content">
      <li v-for="item in data">{{item}}</li>
    </ul>
    <div class="loading-wrapper"></div>
  </div>
</template>
<script>
  import BScroll from 'better-scroll'
  export default {
    data() {
      return {
        data: []
      }
    },
    created() {
      this.loadData()
    },
    methods: {
      loadData() {
        requestData().then((res) => {
          this.data = res.data.concat(this.data)
          this.$nextTick(() => {
            if (!this.scroll) {
              this.scroll = new Bscroll(this.$refs.wrapper, {})
              this.scroll.on('touchend', (pos) => {
                // 下拉动作
                if (pos.y > 50) {
                  this.loadData()
                }
              })
            } else {
              this.scroll.refresh()
            }
          })
        })
      }
    }
  }
</script>

这段代码比之前稍微复杂一些, 当我们在滑动列表松开手指时候， better-scroll 会对外派发一个 touchend 事件，我们监听了这个事件，并且判断了 pos.y > 50（我们把这个行为定义成一次下拉的动作）。如果是下拉的话我们会重新请求数据，并且把新的数据和之前的 data 做一次 concat，也就更新了列表的数据，那么数据的改变就会映射到 DOM 的变化。需要注意的一点，这里我们对 this.scroll 做了判断，如果没有初始化过我们会通过 new BScroll 初始化，并且绑定一些事件，否则我们会调用 this.scroll.refresh 方法重新计算，来确保滚动效果的正常。


先写这么多啦，之后会逐步补充该组件的功能和自己的使用心得。


参考文献：当better-scrool遇见vue  --黄奕

                GitHub上的github.com/ustbhuangyi…


avatar
文章
阅读
粉丝