Better Scroll 官网: better-scroll.github.io/docs/en-US/
Better Scroll 静态数据超出屏幕后可以滚动, 但是如果开始内容没有超出容器, 后面数据更新并内容超出容器, 发现滚动无效.
Vue文件 代码如下:
<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> 中的代码变成了如下样子
<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> 中的代码再次调整
<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>
测试一下, 完美解决了, 开心... 😁😁😁
