使用mint-ui绘制滑动界面,界面如下:
菜单:
['CREDIT', 'DEBIT', 'EBT', 'GIFT', 'FUNC']
子菜单:
[
'CREDIT': ['Sale', 'Forced', 'Return', 'Balance', 'Void Sale', 'Void Forced', 'Void Return'],
'DEBIT': [],
...
]
两种界面切换方式:
问题:滑动(touchstart, touchmove, touchend)与点击事件(click)同时发生时,子菜单重叠显示:
滑动实现代码参见:mint-ui(swipe)
单击事件修改swipe组件的reInitPages函数实现:
reInitPages(gotoIndex) {
const children = this.$children
this.noDrag = children.length === 1 && this.noDragWhenSingle
const pages = []
let intDefaultIndex = Math.floor(this.defaultIndex)
if (gotoIndex !== undefined) {
intDefaultIndex = Math.floor(gotoIndex)
}
const defaultIndex = (intDefaultIndex >= 0 && intDefaultIndex < children.length) ? intDefaultIndex : 0
this.index = defaultIndex
children.forEach((child, index) => {
pages.push(child.$el)
removeClass(child.$el, 'is-active')
if (index === defaultIndex) {
addClass(child.$el, 'is-active')
}
})
this.pages = pages
}
有什么办法可以解决显示重叠问题?
不需要写click事件,在touchstart和touchend中控制,类似下面一个例子,click就是touchstart和touchend事件只不过没有touchmove。如果你想要在touchmove中控制可以单独写一个方法
element.addEventListener('touchstart', (event) => {
if (this.prevent) {
event.preventDefault();
}
this.dragging = true;
this.doOnTouchStart(event);
});
element.addEventListener('touchmove', (event) => {
if (!this.dragging) return;
this.doOnTouchMove(event);
});
element.addEventListener('touchend', (event) => {
if (this.userScrolling) {
this.dragging = false;
this.dragState = {};
return;
}
if (!this.dragging) return;
this.doOnTouchEnd(event);
this.dragging = false;
});