drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Tabs support scroll

Browse source
This commit is contained in:
梁灏 2019-09-06 10:54:50 +08:00
parent 849eedd3bd
commit 81395eca7d
2 changed files with 21 additions and 5 deletions
examples/routers
tabs.vue
src/components/tabs
tabs.vue

10
examples/routers/tabs.vue
View file

@ -1,8 +1,10 @@
<template>
<Tabs type="card">
<TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab">标签{{ tab }}</TabPane>
<Button @click="handleTabsAdd" size="small" slot="extra">增加</Button>
</Tabs>
<div style="height: 5000px">
<Tabs type="card">
<TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab">标签{{ tab }}</TabPane>
<Button @click="handleTabsAdd" size="small" slot="extra">增加</Button>
</Tabs>
</div>
</template>
<script>
export default {

16
src/components/tabs/tabs.vue
View file

@ -12,7 +12,7 @@
<div ref="navWrap" :class="[prefixCls + '-nav-wrap', scrollable ? prefixCls + '-nav-scrollable' : '']">
<span :class="[prefixCls + '-nav-prev', scrollable ? '' : prefixCls + '-nav-scroll-disabled']" @click="scrollPrev"><Icon type="ios-arrow-back"></Icon></span>
<span :class="[prefixCls + '-nav-next', scrollable ? '' : prefixCls + '-nav-scroll-disabled']" @click="scrollNext"><Icon type="ios-arrow-forward"></Icon></span>
<div ref="navScroll" :class="[prefixCls + '-nav-scroll']">
<div ref="navScroll" :class="[prefixCls + '-nav-scroll']" @DOMMouseScroll="handleScroll" @mousewheel="handleScroll">
<div ref="nav" :class="[prefixCls + '-nav']" :style="navStyle">
<div :class="barClasses" :style="barStyle"></div>
<div :class="tabCls(item)" v-for="(item, index) in navList" @click="handleChange(index)">
@ -441,6 +441,20 @@
}
}
},
handleScroll (e) {
e.preventDefault();
e.stopPropagation();
const type = e.type;
let delta = 0;
if (type === 'DOMMouseScroll' || type === 'mousewheel') {
delta = (e.wheelDelta) ? e.wheelDelta : -(e.detail || 0) * 40;
}
if (delta > 0) {
this.scrollPrev();
} else {
this.scrollNext();
}
},
handleResize(){
this.updateNavScroll();
},