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>