vue中使用better-scroll的2种方式简述

　　前言

　　　better-scroll官方demo展示：https://ustbhuangyi.github.io/better-scroll/#/examples/en

　　　better-scroll官方文档说明：https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#better-scroll

　　　　　　

　　　方法一：官方文档推荐的方法

<template>

     <div class="wrapper">

           <ul class="content">

                <li>1</li>

                <li>2</li>

                <li>3</li>

                <li>4</li>

                <li>5</li>

           </ul>

     </div>

</template>

<script>

import BScroll from 'better-scroll'

export default {

     name: 'CityList',

     mounted () {

           this.scroll = new BScroll('.wrapper')

     }

}

　　　注：① 上面代码中better-scroll是作用在外层 wrapper 容器上的，必须有这个父容器包裹，

　　　　　　滚动部分是子元素content ，也就是滚动的内容

　　　　  ② better-scroll只处理父容器wrapper的第一个子元素content的滚动，其它的元素都会被忽略

　　　　　　 比如你在上面的<ul class="content"></ul>后面在添加一个同级<ul class="content2"></ul>，

　　　　　　 被.content2包裹的内容是不会滚动的

　　 方法二：用vue的ref属性获取wrapper节点

<template>

     <div class="main" ref="wrapper">

           <ul class="content">

                <li>1</li>

                <li>2</li>

                <li>3</li>

                <li>4</li>

                <li>5</li>

           </ul>

     </div>

</template>

<script>

import BScroll from 'better-scroll'

export default {

     name: 'CityList',

     mounted () {

           this.scroll = new BScroll(this.$refs.wrapper)

     }

}

　　　注： ① ref的作用是给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上

　　　　　 　如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向组件

　　　　　　 上面的代码中，ref指的就是DOM元素.wrapper

　　　　　 ② this.$refs.wrapper就是获取到DOM元素.wrapper