BetterScroll使用记录

在 package.json 中引入 better-scroll

"dependencies": {
    "vue": "^2.5.2",
    "vue-resource": "^1.5.1",
    "vue-router": "^3.0.1",
    "better-scroll": "^0.1.7"// 根据这一句引入
  }

在命令行输入 npm install

通过此方法，在 node-moudle 中会出现 better-scroll 文件夹

在要使用 better-scroll 的 vue 文件中引入

import BScroll from 'better-scroll';

better-scroll 在 vue 文件中的使用

<div class="menu-wrapper" ref="menuWrapper">
</div>
<div class="food-wrapper" ref="foodWrapper">
</div>
<script>
  created(){this.$http.get('/api/goods').then((response) =>{
            response = response.body;
            if(response.errno === ERR_OK){
                this.goods =response.data;
                console.log(this.goods);
                this.$nextTick(() => {// 这两句代码与此问题有关
                 this._initScroll();// 这两句代码与此问题有关});
            }
        });
    },
    methods: {_initScroll(){// 调用 better-scroll 方法
            this.menuScroll = new BScroll(this.$refs.menuWrapper,{probeType:3});
            this.foodScroll = new BScroll(this.$refs.foodWrapper,{})
        }
    }
</script>

关于 nextTick 方法的简介

先来一个示例了解下关于 Vue 中的 DOM 更新以及 nextTick 的作用

<div class="app">
  <div ref="msgDiv">{{msg}}</div>
  <div v-if="msg1"> 没有使用 nextTick{：{msg1}}</div>
  <div v-if="msg2"> 有使用 nextTick: {{msg2}}</div>
  <div v-if="msg3"> 没有使用 nextTick: {{msg3}}</div>
  <button @click="changeMsg">
    Change the Message
  </button>
</div>

vue 实例

new Vue({
  el: '.app',
  data: {
    msg: 'Hello Vue.',
    msg1: '',
    msg2: '',
    msg3: ''
  },
  methods: {changeMsg() {
      this.msg = "Hello world."
      this.msg1 = this.$refs.msgDiv.innerHTML
      this.$nextTick(() => {this.msg2 = this.$refs.msgDiv.innerHTML})
      this.msg3 = this.$refs.msgDiv.innerHTML
    }
  }
})

输出结果

可以看出使用了 nextTick 会出现加载后的 msg2 显示的是 Hello world

nextTick 的应用场景

1. 在 Vue 生命周期的 created()钩子函数进行的 DOM 操作一定要放在 Vue.nextTick()的回调函数中
在 created()钩子函数执行的时候 DOM 其实并未进行任何渲染，而此时进行 DOM 操作无异于徒劳，所以此处一定要将 DOM 操作的代码放进 Vue.nextTick()的回调函数中。与之对应的就是 mounted()钩子函数，因为该钩子函数执行时所有的 DOM 挂载和渲染都已完成，此时在 mounted 钩子函数中进行任何 DOM 操作都不会有问题

2. 在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的 DOM 结构的时候，这个操作都应该放进 Vue.nextTick()的回调函数中, 在 DOM 操作更新完成之后会执行 nextTick

此文章参考此链接