目录
scroll-view + swiper 滑动加点击切换
前言
继昨天写了篇简单的tab栏切换,后来,我又想起,其实这个tab栏切换,可以换为两部分,第一部分就是上面的 鼠标的高亮效果,第二部分就是 在第一部分的基础上进行操作的,第二部分也算是写死不动的
第一部分 高亮效果
效果图
代码
<view class="navTitle" v-for="(item,index) in navList" :key="index">
<view :class="{'active':current === index}" @click="checked(index)">
{{item.title}}
</view>
</view>
data里
return {
current: 0,
navList: [{
index: 0,
title: '进行中'
}, {
index: 1,
title: "未支付"
}, {
index: 2,
title: "已完成"
}]
}
methods: {
checked(index) {
this.current = index
},
}
第二个部分
就是判断当它点击的下标为哪个,就显示哪个里面的内容
<view class="nav_item" v-if="current==0">
0
</view>
<view class="nav_item" v-if="current==1">
1
</view>
<view class="nav_item" v-if="current==2">
2
</view>
但我今天就想分享下,tab栏是以滚动的方式(数据多的时候使用)实现切换的
其实也很简单
就是在 实现高亮效果的外面加一层 scroll-view 就OK了
上面都说了,第二部分是通用的,那代码 我想 就不需要 我展示吧
<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
<view class="scroll-view-item_H" v-for="(tab,index) in tabBars" :key="tab.id"
:id="tab.id"
:class="navIndex==index ? 'activite' : ''"
@click="checked(index)">{{tab.name}}</view>
</scroll-view>
别忘了 定义 navList 这里面要有很多数据才行
methods: {
checked(index) {
this.current = index
},
scroll(e) {
console.log(e)
this.old.scrollTop = e.detail.scrollTop
},
}
<style scoped>
.activite {
color: #ff0000;
}
.content {
height: 300px;
}
.scroll-view_H {
white-space: nowrap;
width: 100%;
color: #000000;
}
.scroll-view-item_H {
display: inline-block;
width: 20%;
height: 50rpx;
line-height: 50rpx;
text-align: center;
padding: 10px 0;
}
</style>
效果图
取消滚动后的效果
还有一种
scroll-view + swiper 滑动加 点击切换
<template>
<view>
<!--顶部导航栏-->
<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
<view class="scroll-view-item_H" v-for="(tab,index) in tabBars" :key="tab.id" :id="tab.id"
:class="navIndex==index ? 'activite' : ''" @tap="checkIndex(index)">
{{tab.name}}
</view>
</scroll-view>
<!-- 内容 -->
<swiper :current="navIndex" @change="tabChange" class="content">
<swiper-item class="swiper_item ">
1
</swiper-item>
<swiper-item class="swiper_item ">
2
</swiper-item>
<swiper-item class="swiper_item ">
3
</swiper-item>
<swiper-item class="swiper_item ">
4
</swiper-item>
<swiper-item class="swiper_item ">
5
</swiper-item>
</swiper>
</view>
</template>
这个需要在 data return里 定义 old: {
scrollTop: 0
}
methods: {
checkIndex(index) {
this.navIndex = index;
console.log(index)
},
scroll(e) {
console.log(e)
this.old.scrollTop = e.detail.scrollTop
},
//滑动切换swiper
tabChange(e) {
const navIndex = e.detail.current
this.navIndex = navIndex
},
}
}
</script>
<style scoped>
.activite {
color: #04c9c3;
}
.content {
height: 700px;
background-color: #04C9C3;
color: #fff;
}
.scroll-view_H {
white-space: nowrap;
width: 100%;
color: #CCCCCC;
}
.scroll-view-item_H {
display: inline-block;
width: 20%;
height: 50rpx;
line-height: 50rpx;
text-align: center;
padding: 10px 0;
font-size: 32rpx;
}
</style>