在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
此文章参考此链接