Tabs选中效果

最新推荐文章于 2023-07-31 19:54:30 发布

xiaoduzi1991

最新推荐文章于 2023-07-31 19:54:30 发布

阅读量471

点赞数

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

本文链接：https://blog.csdn.net/xiaoduzi1991/article/details/119930912

版权

微信小程序专栏收录该内容

25 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了如何在微信小程序中实现tabs组件，包括wxml结构、wxss样式以及js函数处理。通过示例代码展示了如何绑定点击事件、设置默认选中项，并利用dataset传递参数。同时，文章还提供了tabs的样式设计，如颜色、字体加粗等，以达到选中和未选中状态的视觉区分。

摘要由CSDN通过智能技术生成

在这里插入图片描述

tabs的wxml写法

<view class="container">
    <view class="tabs">
        <!-- bind:tap="handleTabChange"点击事件监听
                    wx:key="index"给点击事件指定Key
                    data-index:data-是固定的，index是自己定义的，
                    要和调用的地方保持一致
                    const index = event.currentTarget.dataset.index
                    dataset后的index要和data-index后的index一致-->
        <view class="tabs-item"
              wx:for="{{tabs}}"
              wx:key="index"
              bind:tap="handleTabChange"
              data-index="{{index}}">
            <!--            Tab选中时使用tab-label样式，未选中时样式为active-tab-->
            <view class="tab-label {{currentTabIndex === index ? 'active-tab':''}}">
                {{item}}
            </view>
            <!--            逻辑控制-->
            <view class="divider" wx:if="{{currentTabIndex===index}}"></view>
        </view>
    </view>
</view>

wxss中样式

.container{
    /*弹性布局样式*/
    display: flex;
    /*布局方式列*/
    flex-direction: column;
    height: 100%;
}

.tabs{
    /*弹性布局，在一行显示*/
    display: flex;
    padding: 30rpx 0;
    background-color: #fff;
    /*对齐方式，居中*/
    align-items: center;
    height: 126rpx;
    /*盒模型的控制，限制大小*/
    box-sizing: border-box;
}

.tabs-item{
    /*tab item均分父类空间*/
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tab-label{
    color: #888888;
    /*不换行*/
    white-space: nowrap;
}

.active-tab{
    color: #333333;
    font-weight: bold;
}

.divider{
    height: 6rpx;
    width: 50rpx;
    margin-top: 10rpx;
    background-color: #f3d066;
}

js中函数

Page({
    data: {
        tabs: ['全部服务', '在提供', '正在找'],
        currentTabIndex: 0 //默认选中
    },
    onLoad: function (options) {

    },
    handleTabChange: function (event) {
        console.log(event)
        const index = event.currentTarget.dataset.index
        this.setData({
            currentTabIndex: index
        })
    }
});