微信小程序mina框架12.2-自定义组件-标题激活选中

编辑自定义组件文件 

https://www.bilibili.com/video/BV1nE41117BQ?p=38&spm_id_from=pageDriver

tabs.wxml文件

<view  wx:for="{{tabs}}"  wx:key="id"  class="title_item {{item.isActive?'active':''}} " >        {{item.name}}        </view>

这里用到了微信的循环wx：for 以及三元判断 {{item.isActive?'active':''}} 来对应 tab.js文件tab数组中的    isActive: false   属性

<view class="tabs">
    <view class="tabs_title">
        <!-- <view class="title_item">首页</view>
        <view class="title_item">原创</view>
        <view class="title_item">分类</view>
        <view class="title_item">关于</view> -->
        <view 
        wx:for="{{tabs}}" 
        wx:key="id"
        class="title_item {{item.isActive?'active':''}}" 
        
        >
        {{item.name}}
        </view>
    </view>
    <view class="tab_content">内容</view>   

</view>

 

tabs.js文件

// components/Tabs/Tabs.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {},

    /**
     * 组件的初始数据
     */
    data: {
        tabs: [
            {
                id: 0,
                name: "首页",
                isActive: true,
            },
            {
                id: 1,
                name: "原创",
                isActive: false,
            },
            {
                id: 2,
                name: "分类",
                isActive: false,
            },
            {
                id: 3,
                name: "关于",
                isActive: false,
            },
        ],
    },

    /**
     * 组件的方法列表
     */
    methods: {},
});

 

 

tabs.wxss文件

.tabs {
}
.tabs_title {
    display: flex;
    padding: 10rpx 0;
}
.title_item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.active {
    color: red;
    border-bottom: 5rpx solid currentColor;
}
.tab_content {
}