BScroll met

BetterScroll is a plug-in that focuses on various scrolling scenarios on mobile devices (supported on PCS). It’s a pure JavaScript implementation, so it’s dependency free.

BetterScroll is an open source project used in projects to avoid having to manually write a scroll page.

How to use BScroll

1. Install

Run the following command to install:

    npm install @better-scroll --save
Copy the code

2. Use

To introduce in script:

    import BScroll from 'better-scroll';
Copy the code

Then load using:

    let bs = new BScroll(wrapper, {})
Copy the code

BScroll practice

1. Example: Click the numeric navigation on the right to jump to the corresponding content

implementation

  1. Code implementation
<template> <! -- Wrapper wrapper --><div class="wrapper" ref="wrapper">
    <div>
      <! -- Content Scroll to the left of details -->
      <div class="content" :ref="index" v-for="index in 10" :key="index">
        {{ index }}
      </div>
    </div>
    <! -- Right navigation column -->
    <ul class="alphabet">
      <li v-for="index in 10" :key="index + '1'" @click="handleClick">
        {{ index }}
      </li>
    </ul>
  </div>
</template>

<script>
 / / import
 import BScroll from 'better-scroll';

export default {
  data(){
    return{
      nums:""}; },mounted() {
    this.init()
  },

  methods: {
    init(){
      this.scroll = new BScroll(this.$refs.wrapper,{
        // Default click, so set click: true
        click:true})},// Get the number of clicks
    handleClick(e){
       this.nums = e.target.innerText;
       console.log(e.target.innerText + "Clicked")
       //console.log(" clicked ")}},watch: {// Listen to the letter change, jump to the corresponding content
    nums(){
      // Adjust to the corresponding numeric div
      this.scroll.scrollToElement(this.$refs[this.nums][0]);
      //console.log(this.$refs[this.nums][0]),}}};</script>

<style>
.wrapper {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: rgb(186.209.175);
}
.content {
  height: 200px;
  width: auto;
  font-size: 20px;
  background: rgb(228.135.178);
  border: 1px rgb(165.9.61) solid;
  align-items: center;
  line-height: 200px;
}
.alphabet {
  position: fixed;
  right: 0;
  top: 150px;
  bottom: 0;
  text-align: center;
  font-size: 30px;
  color: aliceblue;
  list-style-type:none;
}
</style>

Copy the code
  1. The final result

What to pay attention to

  1. Why is the initial click event not executed, then look up the document foundBetterScrollThe default prevents the browser from nativeclickEvent, so to be ininitSet when initializing: 
    init(){
  this.scroll = new BScroll(this.$refs.wrapper,{
    // Default click, so set click: true
    click:true})}Copy the code
  2. Provides the API:scrollToElement(el, time, offsetX, offsetY, easing)Scroll to the specified target element, passing in a DOM object in the above instance. The arguments passed in can beDOM, String, Number, Boolean, Object(seewebsite)
    nums(){
    // Adjust to the corresponding numeric div
    this.scroll.scrollToElement(this.$refs[this.nums][0]);
    // Prints the parameters passed in
    console.log(this.$refs[this.nums][0])},Copy the code

If you click 4: