Using the API of netease Cloud to practice vue, I made a web version of music software, which needs horizontal scrolling and vertical scrolling.

The Batter Scroll is used

Better Scroll official code

2.0 Chinese Version Document

1. Install

npm install @better-scroll/core --save

// or

yarn add @better-scroll/core
Copy the code

2. References

import BScroll from '@better-scroll/core'
Copy the code

3. Vertical scrolling

Vertical scrolling is easier to achieve

<template>
  <div class="wrapper" ref="wrapper">
    <slot></slot>
  </div>
</template>

<script>
import BScroll from "@better-scroll/core";

export default {
  props: {
    top: {
      type: Number.default: 0,},list: {
      type: Array.required: true,}},mounted() {
    this.initScroll();
  },
  The height of the box is smaller than the height of the page, so you can't scroll, so listen to the list and refresh the BScroll component with this.$nextTick.
  watch: {
    list() {
      this.$nextTick(() = > {
        this.refresh(); }); }},beforeUnmount() {
    this.scroll.destroy()
  },
  methods: {
    initScroll() {
      this.$refs.wrapper.style.top = this.top + "px";
      this.scroll = new BScroll(this.$refs.wrapper); // Initialize BScroll
    },
    refresh() {
      this.scroll && this.scroll.refresh(); ,}}};</script>

<style>
.wrapper {
  position: absolute;
  overflow: hidden;  /* Make sure to hide the built-in scroll */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>

Copy the code

Note: the height of the box must be greater than the height of the page, or it will not scroll. If you get data asynchronously like me, you must refresh after the data is loaded, otherwise it may not scroll.

4. Implement horizontal scrolling

<template>
  <div class="horizontal-container">
    <div class="scroll-wrapper" ref="scroll">
      <div class="scroll-content">
        <div
          class="scroll-item"
          v-for="(item, index) in dargonList"
          :key="index"
        >
          <div class="icon">
            <img :src="item.iconUrl" @load="imgLoad" />
          </div>
          <div>
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import BScroll from '@better-scroll/core'

export default {
  props: {
    dargonList: {
      type: Array.required: true,}},mounted() {
    this.init()
  },
  beforeUnmount() {
    this.bs.destroy()
  },
  methods: {
    init() {
      this.bs = new BScroll(this.$refs.scroll, {
        scrollX: true.// Horizontal scrolling needs to be added to the condition
        probeType: 3})},imgLoad() {
      this.bs.refresh();  // Refresh the image after loading}}}</script>

<style lang="scss" scoped>
.horizontal-container{}.scroll-wrapper {
  position: relative;
  width: 100%;
  white-space: nowrap;  / * * / necessary
  overflow: hidden;
}

.scroll-content {
  display: inline-block;  / * * / necessary
}

.scroll-item {
  font-size: 12px;
  display: inline-block;  / * * / necessary
  text-align: center;
  padding: 0 15px;
}

.icon {
  width: 50px;
  height: 50px;
  background: #fdedf0;
  border-radius: 50px;
  margin: 5px 0;
}

.icon > img {
  width: 50px;
  filter: invert(52%) sepia(82%) saturate(5725%) hue-rotate(334deg)
    brightness(100%) contrast(106%); /* #fe3a40#fdedf0 */
}
</style>

Copy the code

Horizontal scrolling is more complex than vertical scrolling, and the emphasis in the documentation is harsh on CSS. First you need to ensure that the wrapper is not wrapped and that the display for the content is inline-block.

5 summary: Better Scroll is relatively simple to use, there are not too many holes, the point to pay attention to is whether the page is completely written after initialization, you can view the source code in the web page to observe whether it is written in.

I am a little white, have wrong place please advise, welcome everyone to discuss.