uni-app:tabs切换页面之一(hbuilderx 3.6.18)

一，代码：

<template>
    <view>
            <!-- 标签页 -->
            <view class="tabs">
                <view class="tabItem" 
                v-for="(item, index) in tabList" 
                :key="index" @click="tabSelect(item.id)">
                <text class="itemText" :class="{itemTextCur:index === tabCur}">
                {{ item.title }}
                </text>
                </view>
            </view>
            
            <!-- 标签页对应的内容 -->
            <block v-if="tabCur === 0">
                <view class="content">这里显示推荐内容</view>
            </block>
            <block v-else-if="tabCur === 1">
                <view class="content">这里显示最新内容</view>
            </block>
            <block v-else>
                <view class="content">这里显示收藏内容</view>
            </block>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                tabCur: 0, // 当前tabs下标
                tabList:[{id:0,title:'推荐'},
                         {id:1,title:'最新'},
                         {id:2,title:'收藏'},
                        ],
            }
        },
        methods: {
// tab切换
            tabSelect(index) {
                if (this.tabCur === index) return
                this.tabCur = index
            }
        }
    }
</script>

<style lang="scss">
    .content{
        width:710rpx;
        margin-left: 20rpx;
        margin-top: 20rpx;
        font-size: 36rpx;
        background: #ff0000;
        display: flex;
        flex-direction: row;
        justify-content:center;
    }
.tabs {
        display: flex;
        flex-direction: row;
        justify-content: center;
        font-size: 32rpx;
        background-color: #FFF;
        color: #A9A9A9;
    }

    .tabItem {
        width:250rpx;
        height: 114rpx;
        line-height: 100rpx;
        color: #ffA9A9;
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-top: 30rpx;
    }
    
    .itemText {
        color: #0000ff;
    }
    
    .itemTextCur{
        color: #F62D5C;
    }
</style>

说明：刘宏缔的架构森林是一个专注架构的博客，

网站：https://blog.imgtouch.com
原文: https://blog.imgtouch.com/index.php/2023/06/05/uniapp-tabs-qie-huan-ye-mian-zhi-yi-hbuilderx-3-6-18/

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，测试效果

三，查看hbuilderx的版本: