vue項目better-scroll使用注意點

1.應該在何時創建BScroll對象

1）created : 中請求數據，ajax是異步的，這個時候可能mounted已經執行完了，也就是dom掛載完了，但數據還沒請求回來，無法獲取到內部元素（數據渲染出來的dom）高度. 無法渲染內部元素，無法滾動
2）updated:數據發生改變時執行；數據改變，dom也要重新渲染，並執行updated,但無法保證是先dom渲染還是先updated,

 

//解決： this.$nextTick(()={ //操作 this.scroll = new BScroll(this.$refs.className,{}) })

3)最佳方式：

mounted() {
    this.scroll = new BScroll(this.$refs.scrollWrapper,{}) } watch: { shuju() { this.$nextTick(() => { this.scroll.refresh(); }) } }

廣州品牌設計公司https://www.houdianzi.com PPT模板下載大全https://redbox.wode007.com

2.拆分better-scroll組件

scroller.vue

vue 感知不到slot變化，但能感知數據變化

" title="" data-original-title="復制">

<template> <div ref="wrapper"> <div> //vue 感知不到slot變化，但能感知數據變化 <slot></slot> </div> </div> </template> <script> import BScroll from 'better-scroll' export default { props: ['shuju'], mounted() { this.scroll = new BScroll(this.$refs.wrapper,{}) }, watch: { //保障數據加載dom渲染，刷新 shuju() { this.$nextTick(() => { this.scroll.refresh(); }) } } } </script> <style> </style>