gao1021514
4 years ago
3 changed files with 252 additions and 0 deletions
@ -0,0 +1,29 @@ |
|||||
|
<template> |
||||
|
<view |
||||
|
class='tab-pane-item' |
||||
|
> |
||||
|
<slot></slot> |
||||
|
</view> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
name:'TabPane', |
||||
|
props:{ |
||||
|
current:{ |
||||
|
default:0, |
||||
|
type:Number |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="stylus"> |
||||
|
.tab-pane-item |
||||
|
width: 100%; |
||||
|
height 100% |
||||
|
display: inline-block |
||||
|
white-space: initial; |
||||
|
vertical-align: top; |
||||
|
font-size: 24upx; |
||||
|
box-sizing: border-box; |
||||
|
overflow: auto |
||||
|
</style> |
||||
@ -0,0 +1,159 @@ |
|||||
|
|
||||
|
<template> |
||||
|
<view |
||||
|
class="tabs" |
||||
|
> |
||||
|
<scroll-view class="active-switch" scroll-x :scroll-into-view="id" scroll-with-animation> |
||||
|
<view class="switch-container" > |
||||
|
<view |
||||
|
v-for="(item,index) in TabList" :key="index" |
||||
|
:class="['active-item',currentTab==index&&'focus',TabList.length==3&&'fix']" |
||||
|
@tap="tabChange(index)" |
||||
|
:id='`tab_${index}`' |
||||
|
> |
||||
|
<view class="item">{{item.title}}</view> |
||||
|
</view> |
||||
|
<view class="focus-line" |
||||
|
:class="[TabList.length==3&&'fix']" |
||||
|
:style="{transform:transformX}" |
||||
|
> |
||||
|
</view> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
<view class="tab-pane-view" |
||||
|
@touchstart='touchstart' |
||||
|
@touchend='touchend' |
||||
|
> |
||||
|
<view |
||||
|
class="tab-pane-group" |
||||
|
:style="{transform:transformXx}" |
||||
|
> |
||||
|
<slot></slot> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
name:'Tabs', |
||||
|
data(){ |
||||
|
return { |
||||
|
id:'tab_0', |
||||
|
start:0 |
||||
|
} |
||||
|
}, |
||||
|
props:{ |
||||
|
TabList:{ |
||||
|
default:()=>{ |
||||
|
return [] |
||||
|
}, |
||||
|
type:Array |
||||
|
}, |
||||
|
currentTab:{ |
||||
|
default:0, |
||||
|
type:Number |
||||
|
} |
||||
|
}, |
||||
|
computed:{ |
||||
|
transformX(){ |
||||
|
let currentTab = this.currentTab; |
||||
|
return `translate3d(${currentTab*100}%, 0px, 0px)` |
||||
|
}, |
||||
|
transformXx(){ |
||||
|
let currentTab = this.currentTab; |
||||
|
return `translate3d(-${currentTab*100}%, 0px, 0px)` |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
tabChange(index){ |
||||
|
if(this.currentTab!=index){ |
||||
|
console.log(`emit:${index}`); |
||||
|
this.$emit('tabs',index); |
||||
|
this.bus.$emit('tabs',index) //事件，这里触发tabs事件 |
||||
|
this.id = `tab_${index}` |
||||
|
} |
||||
|
}, |
||||
|
touchstart(e){ |
||||
|
this.start = e.touches[0].clientX; |
||||
|
}, |
||||
|
touchend(e){ |
||||
|
let end = e.changedTouches[0].clientX; |
||||
|
if(end-this.start>100&&this.currentTab>=1){ |
||||
|
this.tabChange(this.currentTab-1) |
||||
|
}else if(this.start-end>100&&this.currentTab<this.TabList.length-1){ |
||||
|
this.tabChange(this.currentTab+1) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="stylus"> |
||||
|
.tabs |
||||
|
position relative |
||||
|
height 100vh |
||||
|
display flex |
||||
|
flex-direction column |
||||
|
.active-switch |
||||
|
overflow scroll |
||||
|
.switch-container |
||||
|
position relative |
||||
|
display flex |
||||
|
flex-direction row |
||||
|
.focus-line |
||||
|
flex 1 |
||||
|
width 160upx |
||||
|
position absolute |
||||
|
bottom 0 |
||||
|
border-bottom 4upx solid #f07 |
||||
|
transition 0.3s |
||||
|
&.fix |
||||
|
width 250upx |
||||
|
.active-item |
||||
|
position relative |
||||
|
min-width 160upx |
||||
|
width 160upx |
||||
|
flex 1 |
||||
|
height 100upx |
||||
|
transition .3s |
||||
|
background-color: #fff |
||||
|
color #000 |
||||
|
text-align: center |
||||
|
display: flex |
||||
|
flex-direction: column |
||||
|
justify-content: space-around |
||||
|
border-bottom 1upx solid rgba(0,0,0,0.5) |
||||
|
&.focus |
||||
|
background #fff |
||||
|
color #f07 |
||||
|
transition-duration: .3s |
||||
|
&.fix |
||||
|
width 250upx |
||||
|
.item |
||||
|
// width: 220upx |
||||
|
padding: 0 5upx |
||||
|
overflow hidden |
||||
|
font-size: 28upx |
||||
|
.tab-pane-view |
||||
|
overflow hidden |
||||
|
background-color: #f7f7f7 |
||||
|
flex 1 |
||||
|
.tab-pane-group |
||||
|
display: block; |
||||
|
white-space: nowrap; |
||||
|
-webkit-transition: all .3s; |
||||
|
transition: all .3s; |
||||
|
width: 100%; |
||||
|
overflow: visible; |
||||
|
will-change: transform,left,top; |
||||
|
min-height 100upx |
||||
|
height 100% |
||||
|
.tab-pane-item |
||||
|
width: 100%; |
||||
|
min-height 100upx |
||||
|
display: inline-block |
||||
|
white-space: initial; |
||||
|
vertical-align: top; |
||||
|
font-size: 24upx; |
||||
|
box-sizing: border-box; |
||||
|
overflow: auto |
||||
|
</style> |
||||
@ -0,0 +1,64 @@ |
|||||
|
```html |
||||
|
|
||||
|
<template> |
||||
|
<Tabs |
||||
|
:TabList="TabList" |
||||
|
:currentTab="current" |
||||
|
@tabs="tabsChange" |
||||
|
> |
||||
|
<TabPane> |
||||
|
<view>1</view> |
||||
|
</TabPane> |
||||
|
<TabPane> |
||||
|
<view>2</view> |
||||
|
</TabPane> |
||||
|
<TabPane> |
||||
|
<view>3</view> |
||||
|
</TabPane> |
||||
|
</Tabs> |
||||
|
</template> |
||||
|
<script> |
||||
|
/** |
||||
|
* 使用stylus预处理器，可能需要自己添加一下 |
||||
|
* 引入tabs 和tabPane组件 |
||||
|
为tabs 传入 |
||||
|
tablist（tab标题）， |
||||
|
currentTab（选中的tab）， |
||||
|
@tabs事件 改变选中的tabs |
||||
|
TabList:[ |
||||
|
{title:'商品介绍'}, |
||||
|
{title:'规格参数'}, |
||||
|
{title:'售后保障'} |
||||
|
] |
||||
|
TabPane 根据 tab的多少添加。 |
||||
|
更新： |
||||
|
在tabPane区域添加了滑动手指事件。横向滑动切换tab。 |
||||
|
在tabs.vue中的 tabChange方法中发布了全局事件，不需要可以注释掉。这里主要方便tabpane中的内容监听 tabs的切换做出响应。 |
||||
|
*/ |
||||
|
import Tabs from './components/tabs/tabs.vue' |
||||
|
import TabPane from './components/tabs/tabPane.vue' |
||||
|
|
||||
|
export default { |
||||
|
data(){ |
||||
|
return{ |
||||
|
current:0, |
||||
|
TabList:[ |
||||
|
{title:'商品介绍'}, |
||||
|
{title:'规格参数'}, |
||||
|
{title:'售后保障'} |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
tabsChange(index){ |
||||
|
this.current = index |
||||
|
} |
||||
|
}, |
||||
|
components:{ |
||||
|
Tabs, |
||||
|
TabPane |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
``` |
||||
Loading…
Reference in new issue