具体效果:手指在页面左右滑动会切换tab
背景:项目里原有代码复制,去除一些功能,只留一个外壳,目的是为了以后套套套
代码:
<template>
<div class="page" style="overflow:hidden">
<!-- 标题栏 -->
<div class="nav">
<div
@click="toggleSearch(item.value)"
:class="['nav_item', compleStatus == item.value ? 'selected' : '']"
v-for="(item, index) in titleList"
:key="index"
>
<div class="nav_title">
{{ `${item.title}` }}
</div>
<div class="task_tabs_line_wrapper">
<div
class="task_tabs_line"
:style="{
width: 100 / titleList.length + '%',
transform: `translateX(${tabsIndex * 100}%);`
}"
>
<div class="inside_line"></div>
</div>
</div>
</div>
</div>
<div class="main">
<!-- 列表 -->
<swiper
class="taskList_swiper"
@change="changeSwiper"
:current="tabsIndex"
>
<swiper-item class="taskList_swiper_item" v-for="(i, index) in titleList" :key="index">
<div>
<div>内容区域</div>
<div>内容区域</div>
<div>内容区域</div>
<div>内容区域</div>
<div>内容区域</div>
<div>内容区域</div>
<div>内容区域</div>
<div>内容区域</div>
<div>内容区域</div>
<div>内容区域</div>
<div>内容区域</div>
<div>内容区域</div>
<div>内容区域</div>
<div>内容区域</div>
</div>
<!-- <scroll-view
class="content"
scroll-y="true"
refresher-enabled
:scroll-top="scrollTop"
:refresher-triggered="triggered"
@scrolltolower="lower"
@refresherrefresh="onRefresherrefresh"
>
<view class="page_wrap">
<div class="list">
<template>
<div>内容区域</div>
</template>
</div>
</view>
</scroll-view> -->
</swiper-item>
</swiper>
</div>
<!-- 学习中心 -->
<studyCenter v-if="false" />
</div>
</template>
<script>
import studyCenter from '../study-center.vue'
export default {
name: 'advanced-page',
components: {
studyCenter
},
data() {
return {
titleList: [
// 标题列表
{
title: '白银级', // 标题名
value: 0, // 标题编号
count: 0
},
{
title: '黄金级',
value: 1,
count: 0
},
{
title: '铂金级',
value: 2,
count: 0
},
{
title: '钻石级',
value: 3,
count: 0
},
{
title: '王者级',
value: 4,
count: 0
}
],
tabsIndex: 0, // 轮播图当前所在滑块的 index
compleStatus: 0, // 表示所选的nav
scrollTop: 0, // 滚动过程中离顶端的距离
taskList: [], // 活动列表
}
},
methods: {
// 点击切换标题的回调
toggleSearch(val) {
this.tabsIndex = val
this.compleStatus = val
},
// 左右滑动切换标题的回调
changeSwiper(e) {
let val = e.target.current
this.taskList = []
this.toggleSearch(val)
console.log('-----------获取数据-----------')
}
}
}
</script>
<style lang="scss" scoped>
.nav {
border-bottom: 2rpx solid rgba(31, 35, 41, 0.1);
position: fixed;
z-index: 99;
background: #fff;
padding-top: 20rpx;
padding-bottom: 18rpx;
width: 100%;
display: flex;
height: 104upx;
.nav_item {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.nav_title {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: bold;
color: #8f959e;
line-height: 40rpx;
}
.task_tabs_line_wrapper {
position: absolute;
bottom: 16rpx;
left: 0;
height: 4rpx;
width: 100%;
.task_tabs_line {
height: 4rpx;
transition: all 0.2s ease;
.inside_line {
width: 60rpx;
margin: 0 auto;
height: 4rpx;
background: #3865f3;
border-radius: 4rpx;
}
}
}
}
.selected {
.nav_title {
color: #1f2329;
}
}
}
.main {
position: relative;
margin-top: 104rpx;
background-color: rgb(243, 182, 182);
.taskList_swiper {
width: 100%;
height: calc(100vh - 168rpx);
.page_wrap {
min-height: 100%;
padding: 24rpx 20rpx 20rpx 20rpx;
}
.content {
height: calc(100vh - 128rpx);
}
}
}
</style>
注意:scroll-view标签内实现上来加载、下来刷新。因为现在页面用不到,所以并没有保留