|
本来的不加定位，不设置超出隐藏的时候，显示的是右侧滚动条，但是手机端的话，最好还是不用滚动条，所以用这个第三方来处理
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的，监听了也没啥用 | 
转播
