命名规范
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购物车组件
扫一扫
3223
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
