better-scroll滚动排坑

时间 2019-11-15

标签 better scroll 滚动繁體版

原文原文链接

BetterScroll号称目前最好用的移动端滚动插件，所以它的强大之处确定是存在的。要不...哈哈。我的感受仍是很好用的。这篇文章不是笼统的讲BetterScroll，而是单讲滚动，想要深刻了解它，请移步或者这里。css

滚动原理

绿色部分为 wrapper，也就是父容器，它会有固定的高度。黄色部分为 content，它是父容器的第一个子元素，它的高度会随着内容的大小而撑高。那么，当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，咱们就能够滚动内容区了。横向滚动的原理一致就是将固定高度改成固定宽度。（这里就不啰嗦了）vue

纵向滚动git

废话很少说，咱们直接上代码。github

<template>
  <div class="wrapper" ref="wrapper">
      <ul>
        <li v-for="item in 8">{{item}}</li>
      </ul>
  </div>
</template>
<script>
  import BScroll from 'better-scroll';
    export default {
      mounted() {
        this.$nextTick(() => {
          this.scroll = new BScroll(this.$refs.wrapper);
        });
      }
    };
</script>
<style type="text/css">
  .wrapper{
    overflow:hidden;
    height:100vh;
  }
  ul li{
    height:400px;
  }
</style>
复制代码

这是一个Vue BetterScroll纵向滚动demo,这里须要注意的有两点。bash

只能有一层父级div，也就是容器
父级div要设置溢出隐藏，而且固定高度

横向滚动app

横向滚动，相比纵向滚动须要动态的去获取滚动区的宽度，直接上代码。测试

<template>
  <div class="tab" ref="tab">
    <ul class="tab_content" ref="tabWrapper">
      <li class="tab_item" v-for="item in itemList" ref="tabitem">
          {{item.title}}
      </li>
    </ul>
  </div>
  </template>
  <script>
  import BScroll from 'better-scroll';
    export default {
      data() {
        return{
          itemList:[
          {
            'title':'关注'
          },
          {
            'title':'推荐'
          },
          {
            'title':'深圳'
          },
          {
            'title':'视频'
          },
          {
            'title':'音乐'
          },
          {
            'title':'热点'
          },
          {
            'title':'新时代'
          },
          {
            'title':'娱乐'
          },
          {
            'title':'头条号'
          },
          {
            'title':'问答'
          },
          {
            'title':'图片'
          },
          {
            'title':'科技'
          },
          {
            'title':'体育'
          },
          {
            'title':'财经'
          },
          {
            'title':'军事'
          },
          {
            'title':'国际'
          }
          ]
        }
      },
      created() {
        this.$nextTick(() => {
          this.InitTabScroll();
        });
      },
      methods:{
        InitTabScroll(){
          let width=0
          for (let  i = 0; i <this.itemList.length; i++) {
              width+=this.$refs.tabitem[0].getBoundingClientRect().width; //getBoundingClientRect() 返回元素的大小及其相对于视口的位置
          }
          this.$refs.tabWrapper.style.width=width+'px'
          this.$nextTick(()=>{
              if (!this.scroll) {
                this.scroll=new BScroll(this.$refs.tab, {
                  startX:0,
                  click:true,
                  scrollX:true,
                  scrollY:false,
                  eventPassthrough:'vertical'
                });
              }else{
                this.scroll.refresh()
              }
          });
        }
      }
    };
  </script>
  <style lang="scss" scoped>
  .tab{
    width: 100vw;
    overflow: hidden;
    padding:5px;
    .tab_content{
      line-height: 2rem;
      display: flex;
      .tab_item{
        flex: 0 0 60px;
        width:60px;
      }  
    }
  }  
  </style>
复制代码

横向滚动须要注意。flex

只能有一层父级div，也就是容器
父容器要设置溢出隐藏并固定宽度
动态获取滚动区的宽度

由于最近项目须要，因此从网上查阅了许多资料也没法解决个人问题。BetterScroll官网也没有提供实际demo参考，因此就利用休息时间，写了这篇文章。但愿能对大家有用。须要具体demo请移步，别忘了给个star啊，写文章不容易，给个赞呗！ui

tips:上文的代码能够直接使用，小伙伴们安装完依赖后能够直接copy测试哦~this