微信小程序-全CSS选项卡效果，包含切换动画

一只胡盘盘

已于 2024-01-10 14:51:42 修改

阅读量1.1k

点赞数

分类专栏：小程序文章标签：微信小程序 css 小程序

于 2023-03-01 15:49:00 首次发布

本文链接：https://blog.csdn.net/weixin_47348711/article/details/129282921

版权

小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最终效果如下图所示：
在这里插入图片描述
完整复制代码即可

wxml代码

<view class="intro">
    <view class="tab">
        <view wx:for="{{options}}" wx:key='{{index}}' data-index="{{index}}" bindtap="change_tab" class="tab_item {{index==tab_ins?'active':''}}">
            <text>{{item}}</text>
        </view>
        <view class="tab_subscript" style="width: calc(100% / {{options.length}});transform:translateX({{100*tab_ins+'%'}})">
            <view></view>
        </view>
    </view>
    <view class="page_box" style="transform:translateX({{-100/options.length*tab_ins+'%'}})">
        <view wx:for="{{options}}" wx:key='{{index}}' class="page">
            <view class="content">
                页面{{index}}
            </view>
        </view>
    </view>
</view>

js代码
在data中配置选项卡标题，即可生成选项卡

const app = getApp()

Page({
	data: {
		options:['选项一','选项二','选项三'],
		tab_ins:0
	},
	change_tab(e){
		console.log(e)
		this.setData({
			tab_ins:e.currentTarget.dataset.index
		})
	}
})

css代码

.intro {
    height: 100vh;
    display: flex;
    flex-direction: column;
}
.tab{
    display: flex;
    justify-content: space-around;
    position: relative;
    padding-bottom: 10rpx;
    font-size: 28rpx;
    height: 80rpx;
    align-items: center;
}
.tab_item.active{
    color: #FF9800;
}
.tab_subscript{
    position: absolute;
    bottom: 20rpx;
    left: 0;
    height: 6rpx;
    transition: 300ms;
}
.tab_subscript>view{
    width: 30%;
    background:#FF9800;
    height: 6rpx;
    margin: auto;
    border-radius: 4rpx;
}
.page_box{
    display: flex;
    overflow: hidden;
    width: fit-content;
    transition: 300ms;
    flex-grow: 1;
}
.page{
    width: 100vw;
    background: #f2f2f2;
}
.page:nth-child(1){
    background-color: #2196F3;
}
.page:nth-child(2){
    background-color: #03A9F4;
}
.page:nth-child(3){
    background-color: #00bcd4;
}
.content{
    margin-top: 100rpx;
    text-align: center;
}