vue better-scroll的使用

better-scroll使用之前的代码：

<template>
  <div class="list">
    <div class="phoneBook"
        v-for="(item,key) of phoneBooks"
        :key="key">
      <div class="title">{{key}}</div>
      <div class="item"
        v-for="innerItem of item"
        :key="innerItem.id">
        <img :src="getImageUrl(innerItem.image)" >
        <div class="content border-bottom">{{innerItem.name}}</div>
      </div>
    </div>
  </div>
</template>

<script>
    import {getServerUrl} from "../../config/sys";
   
    export default {
        name: "List",
        // 接收参数
        props:{
          phoneBooks:Object
        },
        methods:{
          getImageUrl(image){
            return getServerUrl('image/'+image);
          }
        }
    }
</script>

下面加上better-scroll:

npm install better-scroll --save

<template>
  <div class="list" ref="wrapper">
    <div>
      <div class="phoneBook"
          v-for="(item,key) of phoneBooks"
          :key="key">
        <div class="title">{{key}}</div>
        <div class="item"
          v-for="innerItem of item"
          :key="innerItem.id">
          <img :src="getImageUrl(innerItem.image)" >
          <div class="content border-bottom">{{innerItem.name}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {getServerUrl} from "../../config/sys";
  import BScroll from 'better-scroll'

    export default {
        name: "List",
        // 接收参数
        props:{
          phoneBooks:Object
        },
        methods:{
          getImageUrl(image){
            return getServerUrl('image/'+image);
          }
        },
        mounted() {
          this.scroll = new BScroll(this.$refs.wrapper)
        }
    }
</script>