Vue框架之goods组件开发详解(5)
scrollTo(x, y, time, easing) //滚动到某个位置，x,y 代表坐标，time 表示动画时间，easing 表示缓动函数 scroll.scrollTo(0, 500)
参考： vue使用 better-scroll的参数和方法
6.关于在selectMenu中点击事件
在selectMenu中点击,在pc界面会出现两次事件,在移动端就只出现一次事件的问题
原因 : better-scroll 会监听事件(例如touchmove,click之类),并且阻止默认事件(prevent stop),并且他只会监听移动端的,pc端的没有监听
在pc页面上 better-scroll 也派发了一次click事件,原生也派发了一次click事件
// better-scroll 的事件,有_constructed: true
MouseEvent {isTrusted: false, _constructed: true, screenX: 0, screenY: 0, clientX: 0…}
//pc的事件
MouseEvent {isTrusted: true, screenX: -1867, screenY: 520, clientX: 53, clientY: 400…}
解决 : 针对better-scroll 的事件,有_constructed: true,所以做处理,return掉非better-scroll 的事件
selectMenu(index, event){
if (!event._constructed) { //去掉自带的click事件点击，即pc端直接返回
return;
}
let foodList=this.$refs.foodsWrapper.querySelectorAll(".food-list-hook"); // 获得监听元素
let el = foodList[index]; // 获得 当前 监听元素的高度
this.foodScroll.scrollToElement(el, 300); //类似jump to的功能,通过这个方法,跳转到指定的dom
}
goods 组件到此差不多了！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持黑区网络。