Better-Scroll使用记录

在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

此文章参考此链接