Detailed explanation of the use of scrolling plug-in for vue better-scroll

This time I will bring you a detailed explanation of the use of the vue better-scroll scrolling plug-in. What are the precautions when using the vue better-scroll scrolling plug-in. Here are practical cases, let’s take a look.

BetterScroll is known as the best mobile scrolling plug-in currently, so its power is definitely there. Otherwise...haha. Personally I feel it's very useful. This article is not about BetterScroll in general, but about scrolling in detail. If you want to learn more about it, please go here.

Rolling principle

What is better-scrollScrolling principle

better-scroll is a plug-in that focuses on solving the needs of various scrolling scenarios on the mobile side (PC already supported). Its core is based on the implementation of iscroll. Its API design is basically compatible with iscroll. On the basis of iscroll, it has expanded some features and made some performance optimization.

better-scroll is implemented based on native JS and does not rely on any framework. Its compiled code size is 63kb, 35kb after compression, and only 9kb after gzip. It is a very lightweight JS lib.

The green part is the wrapper, which is the parent container, and it will have a fixed height. The yellow part is content, which is the first child element of the parent container, its height will increase with the size of the content. Then, when content The height does not exceed the height of the parent container and cannot be scrolled. Once it exceeds the height of the parent container, we can scroll the content area. The principle of horizontal scrolling is to change the fixed height to a fixed width. (I won’t go into too much detail here)

Vertical scroll

Without further ado, let’s get straight to the code.

<template>
 <p class="wrapper" ref="wrapper">
   <ul>
    <li v-for="item in 8">{{item}}</li>
   </ul>
 </p>
</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>

This is a Vue BetterScroll vertical scrolling demo. There are two points to note here.

1. There can only be one layer of parent p, that is, the container

2. The parent p must be set to overflow hiding and have a fixed height

Horizontal scroll

Horizontal scrolling, compared to vertical scrolling, requires dynamically obtaining the width of the scroll area and directly entering the code.

<template>
 <p 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>
 </p>
 </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+&#39;px&#39;
     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>

Side scrolling requires attention.

1. There can only be one layer of parent p, that is, the container

2. The parent container must set overflow hiding and fixed width

3. Dynamicly obtain the width of the scroll area

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Full selection and inverse selection in vue

How to obtain it when using the mint-ui time plug-in Select value

The above is the detailed content of Detailed explanation of the use of scrolling plug-in for vue better-scroll. For more information, please follow other related articles on the PHP Chinese website!