uni-app 封装一个顶部选项卡组件

怼烎@ 2023-01-16 06:46 139阅读 0赞

<template>
      <view>
        <uni-selectTab :list="list"  :color="fontcolor" :bgcolor="bgcolor" :viewWidth="viewWidth" :bordline="bordline" :isShow=isShow  @myTapclick="tap" ></uni-selectTab>
      </view>
       
    </template>
    
    <script>
      
        import  selectTap  from  "../../components/selectTab/selectTab.vue"
      export  default{ 
        components:{ 
          "uni-selectTab":selectTap
        },
        data(){ 
          return{ 
            viewWidth:"",
            isShow:0,
            bgcolor:"#243222",
            fontcolor:"#ffffff",
            bordline:"red",
             list:[
               { 
                 name:"名称1"
               },
               { 
                 name:"名称1"
               },
               { 
                 name:"名称1"
               },
               { 
                 name:"名称1"
               },
               { 
                 name:"名称1"
               },
                
                
             ]
          }
        },
        onLoad() { 
          if(this.list.length>6){ 
             
            uni.showToast({ 
                title: "选项过多,最多6个选项",
                icon: "none"
            })
            this.list=[];
            return  false;
            this.viewWidth=100/6+"%";
          }else{ 
            this.viewWidth=100/this.list.length+"%";
          }
           
        },
        methods:{ 
          tap(e){ 
            console.log(e.currentTarget.id);
            this.isShow=e.currentTarget.id;
          }
        }
      }
    </script>
    
    <style>
    </style>

组件：

[https://download.csdn.net/download/weixin\_45932157/17520480][https_download.csdn.net_download_weixin_45932157_17520480]

效果演示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]

[https_download.csdn.net_download_weixin_45932157_17520480]: https://download.csdn.net/download/weixin_45932157/17520480
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]: /images/20221022/2d264891a1a34c48a3c3afbbdaac974b.png