Using a scroll better-scroll package assembly

Using a scroll better-scroll package assembly, pick up small books referred Good Key:

  1. Assembly needs to scroll a fixed height
  2. We need to set overflow to scroll components: hidden

Case are as follows:

<template>
<div class="app-scroll" ref="scroll">
  <div class="scoll-wrap">
    <slot/>
  </div>
</div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'app-scroll',
  mounted(){
    // 创建滚动视图
    this.scroll = new BScroll(this.$refs.scroll, {
      tap: true,
      click: true
    });
    // 如果需要滚动,先刷新滚动视图,就可以在可滚动范围内滚动
    this.scroll.on('beforeScrollStart', ()=>{
      this.scroll.refresh();
    });
  }
};
</script>

<style scoped>
.app-scroll{
  overflow: hidden;
}
</style>

The first one to get up every day, give yourself to make a gas, woo Lulu, fighting ~

Published 18 original articles · won praise 27 · views 553

Guess you like

Origin blog.csdn.net/weixin_44691775/article/details/104426723