A complete guide to using better-scroll to achieve scrolling effects in Vue

Complete guide to using better-scroll to achieve scrolling effects in Vue

As a progressive JavaScript framework, Vue naturally needs to implement some scrolling effects that need to be used on the interface. Different from native JavaScript, Vue has a more convenient life cycle and componentized thinking, and also requires more efficient and flexible scrolling plug-ins to implement complex functions. Better-scroll is a powerful scrolling plug-in that supports various mainstream browsers and mobile devices. It is also one of the most popular libraries under Vue. This article will comprehensively introduce the method of using better-scroll to achieve Vue scrolling effect. I hope it will be helpful to beginners.

1. Pre-knowledge

Using better-scroll to achieve scrolling effects in Vue requires some pre-knowledge reserves, which mainly include the following aspects:

1. Vue basics: Understand basic concepts such as Vue life cycle, components, and data transfer;
2. JavaScript basics: Understand basic variables, functions, objects, arrays, and ES6 syntax;
3. npm: Know npm Installation method and how to introduce the plug-in library into Vue.

2. Installation and introduction of better-scroll

The method of installing better-scroll is very simple. You only need to enter the following command in the terminal:

npm install better-scroll --save

It is also convenient to introduce better-scroll. There are usually two ways to introduce it:

1. Introduce better-scroll globally

Introduce better-scroll in main.js and mount it on the Vue prototype. When you need to use The place is called through this.$bs. As shown below:

import Vue from 'vue'
import BScroll from 'better-scroll'
 
Vue.prototype.$bs = BScroll

2. Introduce better-scroll locally

Use the import statement to introduce better-scroll where it needs to be used, as shown below:

import BScroll from 'better-scroll'

3. Use better-scroll to achieve the scrolling effect

After installing and introducing better-scroll, we can start using better-scroll in Vue to achieve the scrolling effect. The specific steps are as follows:

1. HTML structure

First, we need to build the element structure that needs to be scrolled in the Vue template, as shown below:

<template>
  <div class="wrapper">
    <div class="content">
      <!-- 需要滚动的内容 -->
    </div>
  </div>
</template>

Here we use wrapper to wrap content, and later we will use wrapper as a container to initialize better-scroll.

2. CSS style

Next, we need to set the basic style of wrapper and content, as shown below:

.wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
 
.content {
  position: absolute;
  top: 0;
  left: 0;
}

Here we set the wrapper For relative positioning, the necessary height and width are set, as well as the overflow:hidden attribute. Content is set to absolute positioning to facilitate subsequent scrolling interactions.

3. Initialize better-scroll

Next, we need to initialize better-scroll in the created life cycle of the Vue component, as follows:

export default {
  data() {
    return {};
  },
  created() {
    const wrapper = this.$refs.wrapper;
    
    this.scroll = new this.$bs(wrapper, {
      // options
    });
  },
  mounted() {},
  methods: {},
  destroyed() {}
};

Here we use this.$refs.wrapper to obtain the previously constructed wrapper element, and then initialize better-scroll through new this.$bs(). Before initialization, we can also pass in relevant configuration items in the second parameter, such as scroll direction, scroll events, scroll bars, etc.

4. Destroy better-scroll

In order to ensure page fluency and memory usage efficiency, we need to manually destroy better-scroll before component destruction, as follows:

export default {
  data() {
    return {};
  },
  created() {
    const wrapper = this.$refs.wrapper;
    
    this.scroll = new this.$bs(wrapper, {
      // options
    });
  },
  mounted() {},
  methods: {},
  destroyed() {
    this.scroll.destroy();
  }
};

Here we destroy better-scroll through this.scroll.destroy() in the life cycle of destroyed().

5. Sample code

Finally, we give a complete sample code for readers to refer to and learn:

<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <ul>
        <li v-for="(item, index) in list" :key="index">{{ item }}</li>
      </ul>
    </div>
  </div>
</template>
 
<script>
import BScroll from 'better-scroll'
 
export default {
  data() {
    return {
      list: ['Vue', 'React', 'Angular', 'jQuery', 'Backbone', 'Ember'],
    };
  },
  created() {
    const wrapper = this.$refs.wrapper;
    
    this.scroll = new BScroll(wrapper, {
      scrollY: true,
      scrollX: false,
      click: true,
      bounce: true,
      scrollbar: {
        fade: true,
      },
    });
  },
  destroyed() {
    this.scroll.destroy();
  },
};
</script>
 
<style scoped>
.wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
 
.content {
  position: absolute;
  top: 0;
  left: 0;
}
 
li {
  height: 50px;
  line-height: 50px;
  background-color: #f1f1f1;
  text-align: center;
  font-size: 20px;
  margin: 10px 0;
  border-radius: 5px;
}
</style>

6. Summary

Passed In the introduction of this article, readers can learn how to install, introduce and use better-scroll in Vue to achieve various scrolling effects. At the same time, we also learned some common rolling configuration items and life cycle methods to lay the foundation for further development and learning. I hope this article will be helpful to readers. If there are any deficiencies, please point them out. Thank you.

The above is the detailed content of A complete guide to using better-scroll to achieve scrolling effects in Vue. For more information, please follow other related articles on the PHP Chinese website!