# 顶部选项卡
# u-tabs-swiper实现
# 介绍
最开始采用的是uView的u-tabs-swiper，代码和效果如下：
# "仓库、开发者"选项卡示例代码
示例代码
<template>
<view>
<u-navbar :is-back="false" title-color="#ffffff" :background="{background:'#f24713'}">
<view class="slot-wrap">
<view class="u-tabs-box">
<u-tabs-swiper :height="CustomBar" inactive-color="#ffffff" :bold="false" bg-color="#f24713" activeColor="#ffffb8"
ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
</view>
</view>
</u-navbar>
<RepoTrending ref="repoTrending" @tabsTransition="tabsTransition" @animationfinish="animationfinish" />
</view>
</template>
<script>
import RepoTrending from '@/pages/repos/trending'
export default {
components: {
RepoTrending
},
data() {
return {
current: 0,
list: [{
name: '仓库'
},
{
name: '开发者'
}
]
}
},
methods: {
// tabs通知swiper切换
tabsChange(index) {
this.$refs.repoTrending.tabsChange(index)
},
tabsTransition(dx) {
this.$refs.uTabs.setDx(dx)
},
animationfinish(current) {
this.$refs.uTabs.setFinishCurrent(current)
this.current = current
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
# 效果类似如下，顶部导航栏有标题
# 自定义实现：想要选项卡在顶部导航栏
# 介绍
u-tabs-swiper选项卡没有在顶部导航栏，导致空间比较浪费，想要移动到顶部导航栏，于是采用u-navbar、scroll-view、swiper、swiper-item自定义，详细代码pages/index/index.vue。
# "仓库、开发者"选项卡示例代码
<view>
<u-navbar :is-back="false" title-color="#ffffff" :background="{background:themeBgColor}">
<view class="slot-wrap">
<view class="search-wrap">
<scroll-view scroll-with-animation scroll-x class="nav text-center" style="color:#ffffff"
:style="{'height': CustomBar + 'rpx', 'background-color':themeBgColor}">
<view :style="{color: index==current?'#ffffb8':'#ffffff', height:'50rpx', padding: '0 12rpx', display: 'inline-block'}"
:class="index==current?'custom-tab-swiper-cur':''" v-for="(item,index) in list" :key="index" @tap="tabsChange(index)"
:data-id="index">
{{item.name}}
</view>
</scroll-view>
</view>
<view class="navbar-right">
<view class="right-item">
<text class="iconfont icontiaojie1 u-font-lg" @tap="filtLangTap"></text>
</view>
</view>
</view>
</u-navbar>
<RepoTrending :catchtouchmove="false" ref="repoTrending" @tabsTransition="tabsTransition" @animationfinish="animationfinish" />
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 效果
