微信小程序 Tab实现，可滑动、可点击

最新推荐文章于 2024-07-22 01:47:16 发布

She_lock

最新推荐文章于 2024-07-22 01:47:16 发布

阅读量6.9k

点赞数 2

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

本文链接：https://blog.csdn.net/she_lock/article/details/80928843

版权

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

13 篇文章 1 订阅

订阅专栏

效果：

这里写图片描述

直接码吧，做个笔记。

tab.wxml：

<view class="swiper-tab">
    <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">全部</view>
    <view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">中奖</view>
    <view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">未中奖</view>
</view>

<swiper current="{{currentTab}}" duration="300" bindchange="swiperTab">
    <swiper-item>
        <view>全部</view>
    </swiper-item>
    <swiper-item>
        <view>中奖</view>
    </swiper-item>
    <swiper-item>
        <view>未中奖</view>
    </swiper-item>
</swiper>

tab.wxss：

.swiper-tab {
    width: 100%;
    border-bottom: 2rpx solid #ccc;
    text-align: center;
    height: 88rpx;
    line-height: 88rpx;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
}

.swiper-tab-item {
    width: 30%;
    color: #434343;
}

.active {
    color: #f65959;
    border-bottom: 4rpx solid #f65959;
}

swiper {
    text-align: center;
    background-color: #fff
}

tab.js：

Page({
    data: {
        currentTab: 0
    },
    onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
    },

    //滑动切换
    swiperTab: function (e) {

        this.setData({
            currentTab: e.detail.current
        }); 
    },

    //点击切换
    clickTab: function (e) {
        if (this.data.currentTab === e.target.dataset.current) {
            return false;
        } else {
            this.setData({
                currentTab: e.target.dataset.current
            })
        }
    }
})