Vue Better Scroll 无法滚动问题

Better Scroll 官网: better-scroll.github.io/docs/en-US/

Better Scroll 静态数据超出屏幕后可以滚动, 但是如果开始内容没有超出容器, 后面数据更新并内容超出容器, 发现滚动无效.

Vue文件代码如下:

xml 复制代码

<template>
<div>
  <div class="horizontal-container">
      <div class="scroll-wrapper" ref="scroll">
        <div class="scroll-content">
          <div class="scroll-item" v-for="(item, index) in emojis" :key="index">{{item}}</div>  
        </div>
      </div>
    </div>
</div>
</template>

<script>
import BScroll from '@better-scroll/core' 
export default {
  name: '',
  data () {
    return {
      emojis: ['👉🏼 😁 😂 🤣 👈🏼'],
      emojis2: [
        '👉🏼 😁 😂 🤣 👈🏼',
        '😄 😅 😆 😉 😊',
        '😫 😴 😌 😛 😜',
        '👆🏻 😒 😓 😔 👇🏻',
        '😑 😶 🙄 😏 😣',
        '😞 😟 😤 😢 😭',
        '🤑 😲 ☹️ 🙁 😖',
        '👍 👎 👊 ✊ 🤛',
        '☝️ ✋ 🤚 🖐 🖖',
        '👍🏼 👎🏼 👊🏼 ✊🏼 🤛🏼',
        '☝🏽 ✋🏽 🤚🏽 🖐🏽 🖖🏽',
        '🌖 🌗 🌘 🌑 🌒'
      ]
    }
  },
  mounted () {
    this.init()
    setTimeout(() => {
      console.log('2s: ') 
      this.emojis = this.emojis2  // 注意这里
    }, 2000) 
  },
  beforeDestroy () {
    this.bs.destroy()
  },
  methods: {
    init () {
      this.bs = new BScroll(this.$refs.scroll, {
        scrollX: true,
        probeType: 3 // listening scroll hook
      })
      this._registerHooks(['scroll', 'scrollEnd'], (pos) => {
        console.log('done')
      })
    },
    _registerHooks (hookNames, handler) {
      hookNames.forEach((name) => {
        this.bs.on(name, handler)
      })
    }
  }
}
</script>

<style>
.horizontal-container .scroll-wrapper {
  width: 90%;
  margin: 80px auto;
  white-space: nowrap;
  border: 3px solid #42b983;
  border-radius: 5px;
  overflow: hidden;
}

.scroll-content {
  display: inline-block !important;
}

.scroll-item {
  height: 50px;
  line-height: 50px;
  font-size: 24px;
  display: inline-block;
  text-align: center;
  padding: 0 10px;
}

</style>

根据业务需求, 数据是动态更新的, 这里直接根据官方的静态例子进行修改调整, 发现动态添加数据当内容超过容器后滚动条无效, 即使执行 this.bs.refresh() 函数也无效.

看了官方的常见问题以及网上的一些文章依然没能解决 大写的尴尬 😂😂😂

由于业务功能中滚动区域内容不多, 尝试换了一种思路, 既然无法正确触发 Better Scroll 的计算相关函数或者代码, 绑定数据后再初始化 Better Scroll 这个应该就没问题了, 先试一下, 然后 <script> 中的代码变成了如下样子

xml 复制代码

<script>
import BScroll from '@better-scroll/core' 
export default {
  name: '',
  data () {
    return {
      emojis: ['👉🏼 😁 😂 🤣 👈🏼'],
      emojis2: [
        '👉🏼 😁 😂 🤣 👈🏼',
        '😄 😅 😆 😉 😊',
        '😫 😴 😌 😛 😜',
        '👆🏻 😒 😓 😔 👇🏻',
        '😑 😶 🙄 😏 😣',
        '😞 😟 😤 😢 😭',
        '🤑 😲 ☹️ 🙁 😖',
        '👍 👎 👊 ✊ 🤛',
        '☝️ ✋ 🤚 🖐 🖖',
        '👍🏼 👎🏼 👊🏼 ✊🏼 🤛🏼',
        '☝🏽 ✋🏽 🤚🏽 🖐🏽 🖖🏽',
        '🌖 🌗 🌘 🌑 🌒'
      ]
    }
  },
  mounted () {
    setTimeout(() => {
      console.log('2s: ')
      this.emojis = this.emojis2
      this.$nextTick(() => {
        this.init()
      })
    }, 2000)
  },
  beforeDestroy () {
    this.bs.destroy()
  },
  methods: {
    init () {
      this.bs = new BScroll(this.$refs.scroll, {
        scrollX: true,
        probeType: 3 // listening scroll hook
      })
      this._registerHooks(['scroll', 'scrollEnd'], (pos) => {
        console.log('done')
      })
    },
    _registerHooks (hookNames, handler) {
      hookNames.forEach((name) => {
        this.bs.on(name, handler)
      })
    }
  }
}
</script>

果然好使了, 但是有个问题, 这样每次更新数据都会重新初始化 Better Scroll , 这样有不必要的性能开销. 目前还无解.

做个记录, 解决后再次更新

继续解决遗留问题, 在清理代码时, 发现把 this.nextTick() 去掉后又不能滚动了, 这里又有一个想法, 会不会之前的数据更新后, 调用 this.bs.refresh() 时没有用 nextTick() 函数包裹导致无法更新 Better Scroll 的中的函数代码的, 试一下, <script> 中的代码再次调整

kotlin 复制代码

<script>
import BScroll from '@better-scroll/core' 
export default {
  name: '',
  data () {
    return {
      emojis: ['👉🏼 😁 😂 🤣 👈🏼'],
      emojis2: [
        '👉🏼 😁 😂 🤣 👈🏼',
        '😄 😅 😆 😉 😊',
        '😫 😴 😌 😛 😜',
        '👆🏻 😒 😓 😔 👇🏻',
        '😑 😶 🙄 😏 😣',
        '😞 😟 😤 😢 😭',
        '🤑 😲 ☹️ 🙁 😖',
        '👍 👎 👊 ✊ 🤛',
        '☝️ ✋ 🤚 🖐 🖖',
        '👍🏼 👎🏼 👊🏼 ✊🏼 🤛🏼',
        '☝🏽 ✋🏽 🤚🏽 🖐🏽 🖖🏽',
        '🌖 🌗 🌘 🌑 🌒'
      ]
    }
  },
  mounted () {
    this.init()
    setTimeout(() => {
      console.log('2s: ')
      this.emojis = this.emojis2
      this.$nextTick(() => {
        this.bs.refresh()
      })
      
    }, 2000)
  },
  beforeDestroy () {
    this.bs.destroy()
  },
  methods: {
    init () {
      this.bs = new BScroll(this.$refs.scroll, {
        scrollX: true,
        probeType: 3 // listening scroll hook
      })
      this._registerHooks(['scroll', 'scrollEnd'], (pos) => {
        console.log('done')
      })
    },
    _registerHooks (hookNames, handler) {
      hookNames.forEach((name) => {
        this.bs.on(name, handler)
      })
    }
  }
}
</script>

测试一下, 完美解决了, 开心... 😁😁😁

Vue Better Scroll 无法滚动问题

Vue文件 代码如下:

做个记录, 解决后再次更新

Vue文件代码如下: