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

 

　　 better-scroll官方文档说明：https://ustbhuangyi.github.io/better-scroll/#/examples/en

　　　　　　

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

<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

 

有需要的朋友可以领取支付宝到店红包，能省一点是一点