uniapp+vue3中使用swiper和自定义header实现左右滑动的Tabs功能
首先创建一个Tabs的Header,包含有一个下划线的指示器,在点击tabs的标题时候下划线会跟着动态的滑动
下面是完整的Tabs的代码,可以看到定义了Tabs的background颜色样式,包含tab的宽度indicatorWidth,以及下划线的颜色indicatorColor
主要的是tabList属性,通过tabList传入对应的tab数组得到tabs的头部。在点击的时候因为下划线添加了
<template>
<view>
<view class="tabs" :style="{ background: props.background ? props.background : '#ffffff' }">
<view class="tabs__header flex-center">
<view class="tabs__header-item">
<view
v-for="(tab, index) in props.tabList"
:key="index"
class="tab-item"
@click="handleTabClick(index)">
<view class="tab-item-title" :class="state.currentIndex === index ? 'active' : ''">{{ tab.title }}</view>
</view>
</view>
</view>
<view class="indicator" ref="indicatorRef"></view>
</view>
</view>
</template>
<script setup lang="ts">
import { computed, onMounted, reactive, ref } from "vue"
const emit = defineEmits(["tabClick"])
interface WsTabsOption {
tabList: AnyObject[]
background: string
indicatorColor: string
indicatorWidth: number
}
interface State {
currentIndex: number
}
const props = defineProps<WsTabsOption>()
const indicatorRef = ref()
const state = reactive<State>({
currentIndex: 0
})
const indicatorColor = ref("#0e81ff")
const indicatorWidthValue = ref(10)
const indicatorWidth = computed(() => {
return indicatorWidthValue.value + "vw"
})
const indicatorLeftValue = ref(0)
const indicatorLeft = computed(() => {
return indicatorLeftValue.value + "vw"
})
// 更换tab
const changeTab = (index: number) => {
state.currentIndex = index
changeTabIndicatorLeft(index)
}
onMounted(() => {
indicatorColor.value = props.indicatorColor ? props.indicatorColor : "#0e81ff"
indicatorWidthValue.value = props.indicatorWidth ? props.indicatorWidth : 10
changeTabIndicatorLeft(0)
})
// 更改indicator的位置
const changeTabIndicatorLeft = (index: number) => {
if (props.tabList && props.tabList.length) {
let tabWidth = 100 / props.tabList.length
let startLeft = index * tabWidth
let tabWidthCenter = tabWidth / 2
let indicatorWidthCenter = indicatorWidthValue.value / 2
let leftValue = startLeft + (tabWidthCenter - indicatorWidthCenter)
indicatorLeftValue.value = leftValue
console.log("left value " + startLeft + " # " + leftValue)
}
}
// 点击tab
const handleTabClick = (index: number) => {
state.currentIndex = index
emit("tabClick", index)
}
// 暴露changeTab方法,当swiper更改的时候来更改tabs的header位置
defineExpose({ changeTab })
</script>
<style lang="scss">
page {
background: #f5f5f5;
}
.tabs {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
background: #0e81ff;
&__header {
font-size: medium;
color: grey;
overflow: scroll;
display: flex;
flex-direction: row;
&::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
&-item {
/*解决ios上滑动不流畅*/
-webkit-overflow-scrolling: touch;
white-space: nowrap; /* 合并空白和回车 */
flex: none;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
text-align: center;
margin: 0 auto;
width: 100%;
display: flex;
flex-direction: row;
}
.tab-item {
display: inline-block;
text-align: center;
margin: 10px 10px 5px 10px;
cursor: pointer;
flex: 1;
}
}
&__content {
&-box {
position: relative;
width: 100%;
height: 100%;
min-height: 280rpx;
display: flex;
flex-flow: nowrap;
transition: left 0.5s;
}
}
}
.tab-item-title {
color: #000000;
font-size: 32rpx;
opacity: 0.6;
font-weight: 500;
}
.active {
color: #000000;
font-size: 32rpx;
opacity: 1;
font-weight: bold;
}
.indicator {
bottom: 0;
position: relative;
width: v-bind(indicatorWidth);
height: 4rpx;
border: 1px solid v-bind(indicatorColor);
background-color: v-bind(indicatorColor);
transition: left 0.5s;
left: v-bind(indicatorLeft);
}
</style>
上面是Tabs的header完整代码,下面开始看看怎么和uniapp的swiper进行联动。
利用swiper的current参数创建一个当前页面属性的值,然后通过赋值currentPage来对swiper的页面进行代码控制。
当swiper的页面更改触发@change方法的时候同步设置Tabs的header位置
<template>
<view class="page-wrapper">
<ws-tabs ref="tabsHeaderRef" :tabList="state.tabList" @tabClick="handleClickTab" :indicatorWidth="10"></ws-tabs>
<view style="flex: 1">
<swiper class="swiper" :autoplay="false" ref="swiperRef" :current="currentPage" @change="handleSwiperChange">
<swiper-item>
<view class="swiper__item">
页面1
</view>
</swiper-item>
<swiper-item>
<view class="swiper__item">
页面2
</view>
</swiper-item>
<swiper-item>
<view class="swiper__item">
页面3
</view>
</swiper-item>
</swiper>
</view>
</view>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue"
import WsTabs from "../components/ws-tabs.vue"
interface State {
loading: boolean
tabList: AnyObject[]
}
const state = reactive<State>({
loading: false,
tabList: [{ title: "页面1" }, { title: "页面2" }, { title: "页面3" }]
})
const tabsHeaderRef = ref()
const swiperRef = ref()
const currentPage = ref(0)
const handleClickTab = index => {
currentPage.value = index
}
const handleSwiperChange = (e: AnyObject) => {
tabsHeaderRef.value.changeTab(e.detail.current)
}
</script>
<style lang="scss">
.page-wrapper {
display: flex;
flex: 1;
flex-direction: column;
height: calc(100vh - 88rpx);
}
page {
background: #f5f5f5;
}
.swiper {
display: flex;
flex-direction: column;
height: 100%;
}
.upload-button {
background: rgba(12, 127, 252, 0.15);
border-radius: $uni-border-radius-base;
margin-top: 30rpx;
color: #0c7ffc;
font-size: 34rpx;
font-weight: 500;
}
.radio-button {
color: black;
flex: 1;
margin-top: 20rpx;
background: #f5f5f5;
padding: 20rpx;
height: 40rpx;
font-size: 28rpx;
border-radius: $uni-border-radius-base;
border: 2rpx solid #f5f5f5;
font-weight: 500;
view:nth-child(1) {
margin-left: 40rpx;
}
}
</style>