第十二课时better-scroll 实现区域滚动

安装better-scroll

npm install --save better-scroll

list.vue 对应修改

安装好import 一下，在网页挂载完毕后实例化。

<script>
    import Bscroll from 'better-scroll'
    import {getServerUrl} from '@/config/sys.js'

    export default {
        name: "List",
        props:{
          phoneBooks:Object
        },
        methods:{
          getImageUrl(image){
            return getServerUrl('image/'+image);
          }
        },
        mounted() { //在网页挂载完毕后
          this.scroll=new Bscroll(this.$refs.wrapper)//实例化
        }
    }
</script>

界面结构规定(使用better-scroll，需要特定的结构，为啥需要请去看它的实现原理)：

<template>
	<div class="list" ref="wrapper">   <!--ref和上面的this.$refs.wrapper对应-->
	
	  <div><!--这个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 是必须的-->
	  
	</div>
</template>