Using better-scroll scrolling plug-in in vue

This article mainly introduces the detailed explanation of vue better-scroll rolling plug-in troubleshooting. Now I will share it with you and give you a reference.

BetterScroll is known as the best mobile scrolling plug-in at present, 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.

Scrolling principle

better-scroll What is Scrolling principle

better- scroll is a plug-in that focuses on solving the needs of various scrolling scenarios on the mobile terminal (PC is 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 optimizations.

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 the height of the content does not exceed the height of the parent container, it 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. (No more verbosity here)

Vertical scrolling

Without further ado, let’s go directly 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 &#39;better-scroll&#39;;
  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 scrolling

Horizontal scrolling. Compared with vertical scrolling, you need to dynamically obtain the width of the scroll area and directly enter 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 &#39;better-scroll&#39;;
  export default {
   data() {
    return{
     itemList:[
     {
      &#39;title&#39;:&#39;关注&#39;
     },
     {
      &#39;title&#39;:&#39;推荐&#39;
     },
     {
      &#39;title&#39;:&#39;深圳&#39;
     },
     {
      &#39;title&#39;:&#39;视频&#39;
     },
     {
      &#39;title&#39;:&#39;音乐&#39;
     },
     {
      &#39;title&#39;:&#39;热点&#39;
     },
     {
      &#39;title&#39;:&#39;新时代&#39;
     },
     {
      &#39;title&#39;:&#39;娱乐&#39;
     },
     {
      &#39;title&#39;:&#39;头条号&#39;
     },
     {
      &#39;title&#39;:&#39;问答&#39;
     },
     {
      &#39;title&#39;:&#39;图片&#39;
     },
     {
      &#39;title&#39;:&#39;科技&#39;
     },
     {
      &#39;title&#39;:&#39;体育&#39;
     },
     {
      &#39;title&#39;:&#39;财经&#39;
     },
     {
      &#39;title&#39;:&#39;军事&#39;
     },
     {
      &#39;title&#39;:&#39;国际&#39;
     }
     ]
    }
   },
   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:&#39;vertical&#39;
        });
       }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>

Horizontal 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

Because of the recent project needs, I checked a lot of information from the Internet but could not solve my problem. The BetterScroll official website does not provide actual demo reference, so I took advantage of my break to write this article. Hope it's useful to you. If you need a specific demo, please move here and don’t forget to give it a star. Writing articles is not easy, so give it a like!

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to integrate vue into jquery/bootstrap projects?

About the use of vue-fontawesome in vue.js

Use JS to add new elements to the node

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