<template>
<view class="Text_box">
<view class="horizonal-tab">
<scroll-view scroll-x="true" scroll-with-animation class="scroll-tab">
<block v-for="(item, index) in subjList" :key="index">
<view class="scroll-tab-item" :class="{ active: tabIndex == index }" @tap="toggleTab(index, item)">
{{ item.name }}
<view class="scroll-tab-line">
<!-- aaa -->
</view>
</view>
</block>
</scroll-view>
</view>
<view class="container">
{{tabIndex}}
</view>
</view>
</template>
<script>
import {
myAchs
} from '@/apis/home'
export default {
data(){
return{
tabIndex:0,
subjList:[
{id:1,name:'语文'},
{id:2,name:'数学'},
{id:3,name:'英语'},
{id:4,name:'化学'},
{id:5,name:'地理'},
]
}
},methods:{
//切换选项卡
toggleTab(index, item) {
this.tabIndex = index
this.gradeIddata = item.id
console.log(index)
},
getList(){
console.log('888888888888666')
this.uniRequestFunc({
url: myAchs,
method: 'GET',
success: ({ code, data }) => {
if (code === 0) {
console.log('🚀 ~ 成绩 ~ data', data)
}
},
})
}
},onLoad() {
},onShow() {
this.getList()
}
}
</script>
<style scoped lang="scss">
.horizonal-tab {
line-height: 80rpx;
// background-color:#13C2FB ;
// opacity:0.2;
}
.horizonal-tab .active {
color: #000;
font-size: 32rpx;
font-weight: bold;
}
.scroll-tab {
white-space: nowrap;
/* 必要,导航栏才能横向*/
// border-bottom: 1rpx solid #eee;
text-align: center;
}
.scroll-tab-item {
color: #333333;
display: inline-block;
font-size: 30rpx;
/* 必要,导航栏才能横向*/
margin: 20rpx 30rpx 0 30rpx;
}
.active .scroll-tab-line {
font-size: 32rpx;
margin-top: 20rpx;
border-bottom: 5rpx solid #01B2FF;
border-top: 5rpx solid #01B2FF;
border-radius: 20rpx;
width: 70rpx;
}
</style>
uni-app选项卡
最新推荐文章于 2024-06-03 13:38:13 发布