Componentization BetterScroll

Define the “loading” background color with element-loading-background

<template>
  <div
    class="my-better-scroll"
    ref="scroll"
    element-loading-background="Rgba (0, 0, 0, 0.8)"
  >
    <div class="my-better-scroll__content">
      <slot></slot>
    </div>
    <button class="my-scroll-arrow" @click="arrowClick">
      <i class="el-icon-arrow-right"></i>
    </button>
  </div>
</template>

<script>
import BScroll from '@better-scroll/core'
import MouseWheel from '@better-scroll/mouse-wheel'
import ObserveDOM from '@better-scroll/observe-dom'

/* Enable detection of content and its child DOM changes. When these DOM elements change after the plug-in is used, the Scroll refresh method is triggered. The observe-dom plugin has the following features: For CSS properties that change frequently, adding debounce will not trigger refresh */ if the change occurs during scroll animation
BScroll.use(ObserveDOM)
// mouseWheel extends BetterScroll mouseWheel capabilities.
BScroll.use(MouseWheel)

/ * * * TODO this component is defined as the infinite scroll to the right only * [when better - scroll met Vue] * (https://zhuanlan.zhihu.com/p/27407024) [API](https://better-scroll.github.io/docs/zh-CN/) */
export default {
  name: 'BetterScroll'.methods: {
    /** * When the arrow is clicked, scroll one component width to show the content not seen by the user */
    arrowClick() {
      // TODO is only suitable for right scrolling
      const scrollLength = this.scroll.x - this.$refs.scroll.clientWidth
      this.scroll.scrollTo(scrollLength)
      this.$emit('arrow')},init() {
      this.scroll = new BScroll(this.$refs.scroll, {
        click: true.scrollX: true.scrollY: false.observeDOM: true.mouseWheel: {
          // The slow time of the scroll animation
          easeTime: 100.// As long as there is no scroll detected within discreteTime, the scroll action is over.
          discreteTime: 100,}})this.scroll.scroller.hooks.on('scrollEnd'.() = > {
        // Scroll to the bottom
        if (this.scroll.x <= this.scroll.maxScrollX + 50) {
          this.$emit('end')}})},},mounted() {
    this.init()
  },
}
</script>

<style lang="scss" scoped>.my-better-scroll { overflow: hidden; position: relative; $arrow-size: 12px; & > .my-better-scroll__content { display: inline-block; white-space: nowrap; padding-right: $arrow-size + 2; & > * { display: inline-block; } } & > .my-scroll-arrow { cursor: pointer; display: flex; position: absolute; flex-direction: column; justify-content: center; font-size: $arrow-size; border-radius: 20px; height: 100%; top: 0; right: 0; padding: 0; margin: 0; border-width: 0; & > i { font-weight: 800; } &:focus { outline: none; }}}</style>
Copy the code

use

Lazy loading is implemented through V-loading

<template>
  <BetterScroll @end="loadData" v-loading="loading">
    <div
      class="my-scroll-item"
      v-for="(item, index) in items"
      :key="index"
      @click="itemClick(item, index)"
    >
      <el-card>
        {{ item.text }}
      </el-card>
    </div>
  </BetterScroll>
</template>

<script>
import BetterScroll from '@/components/BetterScroll'

export default {
  name: 'MyScroll'.components: {
    BetterScroll,
  },
  data() {
    return {
      items: [{text: 'elements' },
        { text: 'elements' },
        { text: 'elements' },
        { text: 'elements' },
        { text: 'elements' },
        { text: 'elements' },
        { text: 'elements' },
        { text: 'elements' },
        { text: 'elements'},].loading: false,}},methods: {
    loadData() {
      this.loading = true
      if (this.items.length < 15) {
        console.log('load start')
        setTimeout(() = > {
          console.log('load end')
          for (let i = 0; i < 3; i++) {
            this.items.push({
              text: ` elementsThe ${this.items.length}`})},this.loading = false
        }, 1000)}else {
        this.loading = false
        this.loaded()
      }
    },
    loaded() {
      this.$message({
        message: 'No more data.'.duration: 1500,}}),itemClick(item, index) {
      console.log(item, index)
    },
  },
}
</script>



<style lang="scss" scoped>
.my-scroll-item {
  width: 80px;
  height: 80px;
}
</style>
Copy the code