vue使用betterscroll解决滚动

本来的不加定位，不设置超出隐藏的时候，显示的是右侧滚动条，但是手机端的话，最好还是不用滚动条，所以用这个第三方来处理

 

1.执行命令安装:npm install better-scroll --save

2.重启：npm run start

3.Dom格式 要符合：（就是最外层有包裹，再包裹，然后一样的列，可以是其他标签）

<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
</div>

4.引入：

import BScroll from 'better-scroll'   //引入
const wrapper = document.querySelector('.wrapper')   //接收dom元素
const scroll = new BScroll(wrapper)   //创建实例的时候要接收一个dom元素

列如：

<template>
<!--ref属性去获取dom  -->
  <div class="wrapper" ref="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
</div>
</template>
<script>
import BScroll from 'better-scroll'    //引入
export default {
  name: 'CityList',
  mounted: function () {     //在页面挂载后执行
    this.scroll = new BScroll(this.$refs.wrapper)    //创建实例的时候接收dom元素
  }
}
</script>
<style lang="stylus" scoped="scoped">
.wrapper {
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 1.58rem;
  left: 0;
  rigth: 0;
  bottom: 0;
}
</style>

这样滚动的话就很流畅，还会有弹性的动画效果.

【组件的data中并没有定义属性scroll,也可以使用吗？】

【答案是可以的，scroll只是定义的一个变量，用来接收Bscroll的实例，以便以后可以调用Bscroll的一些属性或者方法进行操作】

var vm ={} 定义对象

vm.xx是取值
vm.xx= xxx是添加属性或者方法
vue data不写，只是会导致这个属性不会被监听，这种new BScroll的，监听了也没啥用