Vue中使用better-scroll实现滑块偶现空白，首次进入必现问题求助

Hey there, I’ve run into this exact better-scroll blank slider problem plenty of times in Vue projects—let’s break down why it happens and how to fix it, especially that guaranteed first-load blank issue.

Common Causes #

The main culprit behind the first-load blank and occasional empty displays is almost always timing: better-scroll initializes before your slider content is fully rendered or your asynchronous data has loaded. Better-scroll relies on accurate DOM dimensions to calculate scroll boundaries, and if it runs too early, it thinks there’s nothing to scroll.

Step-by-Step Solutions #

1. Initialize Better-Scroll After DOM is Fully Rendered #

In Vue, use $nextTick to wait until the DOM has finished updating before setting up your scroll instance. This is critical for the first page load:

export default {
  mounted() {
    // Wait for Vue to finish rendering the slider DOM
    this.$nextTick(() => {
      this.initSliderScroll()
    })
  },
  methods: {
    initSliderScroll() {
      this.scroll = new BScroll(this.$refs.sliderWrapper, {
        scrollX: true, // For horizontal sliders
        scrollY: false,
        click: true, // Enable clicks if needed
        probeType: 2 // Optional: for scroll event tracking
      })
    }
  }
}

2. Refresh Scroll After Asynchronous Data Loads #

If your slider content comes from an API call, you need to re-calculate scroll dimensions once the data is ready. Use a watcher to trigger a refresh:

export default {
  data() {
    return {
      sliderItems: []
    }
  },
  watch: {
    sliderItems(newItems) {
      // Only refresh if we actually have data
      if (newItems.length) {
        this.$nextTick(() => {
          // Initialize if not already done, or refresh existing instance
          if (!this.scroll) {
            this.initSliderScroll()
          } else {
            this.scroll.refresh()
          }
        })
      }
    }
  },
  methods: {
    async fetchSliderData() {
      const response = await yourApiCall()
      this.sliderItems = response.data
    },
    initSliderScroll() {
      this.scroll = new BScroll(this.$refs.sliderWrapper, {
        scrollX: true,
        scrollY: false
      })
    }
  },
  mounted() {
    this.fetchSliderData()
  }
}

3. Double-Check Your CSS Styles #

Bad styling can also break better-scroll’s calculations. Make sure your slider container and content have these styles:

.slider-wrapper {
  overflow: hidden; /* Required: hides overflow content */
  width: 100%; /* Set to your desired container width */
}

.slider-content {
  white-space: nowrap; /* Keeps slider items in a single row */
}

.slider-item {
  display: inline-block; /* Ensures items line up horizontally */
  width: 200px; /* Set to your item's fixed width */
  margin-right: 10px; /* Optional spacing */
}

4. Update Better-Scroll to the Latest Stable Version #

Occasionally, bugs in older versions can cause rendering issues. Run this command to upgrade:

npm install better-scroll@latest --save

5. Destroy Scroll Instance on Component Unmount #

To prevent memory leaks and unexpected behavior, clean up the scroll instance when your component is destroyed:

beforeUnmount() {
  if (this.scroll) {
    this.scroll.destroy()
    this.scroll = null
  }
}

Final Notes #

The most important fix here is waiting for your content (DOM + data) to be fully ready before initializing or refreshing better-scroll. That’s the root of the first-load blank issue. If you still run into problems, try logging the offsetWidth/offsetHeight of your slider content right before initializing—if it’s 0, you know the timing is still off.

内容的提问来源于stack exchange，提问作者Yummy