vue连线 插件_vue常用插件

命名规范

http://www.h3399.cn/201703/59026.html

better-scroll + vue2.0 实现移动端滑动2——左右联动

引用better-scroll报错Cannot read property 'children' of undefined

DOM ,生成的代码会在引用的下一个div里面，

css,在当前div同层级上面一个，用relative

.main-content-wrapper{

position: absolute;

top: 100px;

bottom: .94rem;

width: 100%;

overflow: hidden;}

js

//created里面调用_initScroll

created() {

this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];

this.$http.get('/api/goods').then((response) => {

response = response.body;

if (response.errno === ERR_OK) {

this.goods = response.data;

this._initScroll();

console.log(this.goods);

//记得调用$nextTick更新数据是异步的

this.$nextTick(() => {

this._initScroll();

});

}

});

},

/********************************************/

//

_initScroll()加下划线代表私有方法，不能被外部调用，不加下划线，代表可以被父组件调用此方法

_initScroll() {

this.$nextTick(() => {

if (!this.scroll) {

this.scroll = new BScroll(this.$refs['main-content-wrapper'], {

// 默认它会阻止touch事件。所以在配置中需要加上click: true

click: true

})

} else {

// 重新计算

this.scroll.refresh()

}

})

} }

或者直接

methods: {

show() {

this.showFlag = true;

this.$nextTick(() => {

if (!this.scroll) {

this.scroll = new BScroll(this.$refs.food, {

// 默认它会阻止touch事件。所以在配置中需要加上click: true

click: true

});

} else {

// 重新计算

this.scroll.refresh();

}

});

},

hide() {

this.showFlag = false;

}

}

引用成功会出现

使用better-scroll @click事件在移动端无效

解决：加click:true

methods: {

// 左边菜单点击事件

selectMenu(index) {

console.log(index);

},

_initScroll() {

this.menuScroll = new BScroll(this.$refs['menu-wrapper'], {

// 默认它会阻止touch事件。所以在配置中需要加上click: true

click: true

});

}

在pc端打印出来，会出现打印两次index的结果，解决方法，加事件

// 左边菜单点击事件

selectMenu(index, event) {

if (!event._constructed) {

return;

}

console.log(index);

},

shopcart购物车组件