使用vue写h5页面嵌入安卓或者ios滚动卡或者回弹解决办法better-scroll

1,112 阅读1分钟
  1. 安装better-scroll

    cnpm install better-scroll --save

  2. 引入better-scroll

    import BScroll from "better-scroll";

  3. html中结构(必须只有一个子容器<就是要滚动的内容>)

    <div ref="wrapper" class="home">   <div class="main">      滚动的内容区域 
       </div>
    </div>
    

  4. 样式

    .home {  position: absolute;  overflow: hidden;  height: 100%;  width: 100%;}
    .main {  width: 100%;  height: auto;  display: flex;  display: -webkit-inline-flex;  flex-direction: column;  align-items: center;  position: relative;  background-color: rgba(0, 0, 0, 0.9);}
    

  5. 初始化滚动(必须为dom全部渲染完成才调用,可写在monted或者update生命周期,或者写在数据请求完成的回调函数里也可以)

    this.$nextTick(() => {      this.scroll = new BScroll(this.$refs.wrapper, {        click: true,        bounce: false      });    });

  6. 中文文档

ustbhuangyi.github.io/better-scro…