Numpy基础教程

Unity地形野外插件_Gaia

  返回  

小程序头部导航栏

2021/8/20 21:14:43 浏览:
<!--components/Tabs/Tabs.wxml-->
<!-- <text>components/Tabs/Tabs.wxml</text> -->
<view class="tabs">
    <view class="tabs_title">
        <!-- <view class="title_item ">首页</view>
        <view class="title_item active">原创</view>
        <view class="title_item">分类</view>
        <view class="title_item">关于</view> -->
        <view 
        wx:for="{{tabs}}"
        wx:key="id"
        class="title_item {{ item.isActive?'active':''}}"
        bindtap="hanldeItemTap"
        data-index="{{index}}"
        > {{item.name}}</view>
    </view>
    <view class="tabs_content">内容</view>
</view>
/* components/Tabs/Tabs.wxss */
.tabs{}
.tabs_title{
    display: flex;
    padding-left: 10rpx 0;
}
.title_item{
    flex: 1;
    display: flex;
    /* justify-items: center; */
    align-items: center;
    justify-content: center;
}
.active{
    color: red;
    border-bottom:5rpx solid currentColor;
}

// 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

                },
            ]
    },

    /**
     * 组件的方法列表![请添加图片描述](https://img-blog.csdnimg.cn/8bc41ef83cef417cbe08f447fe75d2f6.jpg)

     */
    methods: {
        hanldeItemTap(e){
            console.log(e.currentTarget.dataset.index);
            let {index}=e.currentTarget.dataset
            let {tabs}=this.data
            tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false)
            this.setData({
                tabs
            })
        }   
    }
})

预览图
请添加图片描述

联系我们

如果您对我们的服务有兴趣,请及时和我们联系!

服务热线:18288888888
座机:18288888888
传真:
邮箱:888888@qq.com
地址:郑州市文化路红专路93号