vue使用betterscroll解决滚动

素颜马尾好姑娘i 2021-12-21 07:49 385阅读 0赞

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

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

2.重启：npm run start

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

4.引入：

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

列如：

<template>
    
      <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的，监听了也没啥用