微信小程序自定义tab实现多层tab嵌套

发布时间:2022-08-19 12:11

本文实例为大家分享了微信小程序自定义tab实现多层tab嵌套的具体代码,供大家参考,具体内容如下

仅供参考,刚学,不对的地方希望交流学习

HTML:

 js部分

export default {
        data(){`在这里插入代码片`
            return{
                 btnnum: 0,
                 bu:0
            }
        },
        methods: {
          change(e) {
               this.btnnum = e
               console.log(this.btnnum)
           },
           change1(e){
               this.bu=e
               console.log(this.bu)
           }
        }
    }

css部分:

/* 将三个内容view的display设置为none(隐藏) */
    .end-title{
        display: flex;
        
    }
    .end-title p{
        flex-grow: 1;
        text-align: center;
    }
    .end-title view{
        flex-grow: 1;
        text-align: center;
        background-color: #6666660d;
        width: 20%;
        margin:0 20rpx ;
        border-radius: 20rpx;
    }
    .end-cont{
        margin: 0 10rpx;
        display: none;
        background:#fff;
        /* border: 1px solid ; */
        /* background-color: #999999; */
        border-radius: 5px;
    }
    .btn{
         color: red;
    }
    .btna{
        color: red;
        background: #e8dcdb;
        
    }
    .dis{
        display: block;
    }

效果图:

微信小程序自定义tab实现多层tab嵌套_第1张图片

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号