better-scroll的安装和使用

better-scroll插件git地址https://github.com/ustbhuangyi/better-scroll
vue-cli 环境下安装
cnpm install better-scroll --save
在文件中引入

<script>
  import Bscroll from 'better-scroll'
  export default {
	 	name:'',
	 	 mounted() {
	    }
	 }
</script>

html 部分

<template>
 <div class="list wrapper" ref="wrapper">
 	<div>
  <div class="area">
  <div class="title border-topbottom">当前城市</div>
  <div class="button-list">
   <div class="button-wrapper">
   	<div class="button">北京</div>
  </div>
  </div>
  </div>
  <div class="area">
  <div class="title  border-topbottom">热门城市</div>
   <div class="button-list">
	<div class="button-wrapper" 
		 v-for="item of hot"
		 :key="item.id">
    	<div class="button">{{item.name}}</div>
    </div>
    
  </div>
  </div>
  <div class="area"
  	 v-for="(item,key) of cities"
  	 :key="key"
  	 >
  <div class="title  border-topbottom">{{key}}</div>
  <div class="item-list">
  	<div class="item border-bottom"
  		v-for="innerItem of item"
  		:key="innerItem.id"
  		>{{innerItem.name}}</div>
  </div>
  </div>
  </div>
 </div>

</template>

<script>
  import Bscroll from 'better-scroll'
  export default {
	 	name:'CityList',
	 	props: {
	 	 hot: Array,
	 	 cities:Object
	 	},
	 	 mounted() {
	        this.scroll = new Bscroll(this.$refs.wrapper)
	    }
	 }
</script>
    <style lang="stylus" scoped>
    @import '~styles/varibles.styl'
	.border-topbottom
	   &:before
	     border-color:#ccc
	   &:after
	     border-color:#ccc
	.border-bottom
	   &:before
	     border-color:#ccc
	   &:after
	     border-color:#ccc
	.list
	 overflow:hidden
	 position:absolute
	 top:1.68rem
	 left:0
	 right:0
	 bottom:0
	 .title
	  line-height:.5rem
	  background:#eee
	  padding-left:.2rem
	  color:#666
	 .button-list
	  padding:.1rem .6rem .1rem  .1rem 
	  overflow:hidden
	  .button-wrapper
	   float:left
	   width:33.33%
	   .button
	    text-align:center
	    margin:.1rem
	    padding:0.1rem 0
	    border-radius:.06rem
	    border:.02rem #ccc solid
	 .item-list
	  .item
	   line-height:.70rem
	   padding-left:.2rem
   
    </style>