zoukankan      html  css  js  c++  java
  • 微信小程序tab选项卡

    自定义微信小程序tab选项卡

    demo.wxml:

    <view class="tab">  
     <view class="tab-left" bindtap="tabFun">  
       <view class="{{tabArr.curHdIndex=='0'? 'active' : ''}}" id="tab-hd01" data-id="0">tab-hd01</view>  
       <view class="{{tabArr.curHdIndex=='1'? 'active' : ''}}" id="tab-hd02" data-id="1">tab-hd01</view>  
       <view class="{{tabArr.curHdIndex=='2'? 'active' : ''}}" id="tab-hd03" data-id="2">tab-hd01</view>  
       <view class="{{tabArr.curHdIndex=='3'? 'active' : ''}}" id="tab-hd04" data-id="3">tab-hd01</view>  
     </view>  
    
     <view class="tab-right">  
       <view class="right-item {{tabArr.curBdIndex=='0'? 'active' : ''}}">tab-bd01</view>  
       <view class="right-item {{tabArr.curBdIndex=='1'? 'active' : ''}}">tab-bd02</view>  
       <view class="right-item {{tabArr.curBdIndex=='2'? 'active' : ''}}">tab-bd03</view>  
       <view class="right-item {{tabArr.curBdIndex=='3'? 'active' : ''}}">tab-bd04</view>  
     </view>  
    </view>  
    demo.js:
    Page( {  
      data: {  
        tabArr: {  
          curHdIndex: 0,  
          curBdIndex: 0  
        },  
      },  
      tabFun: function(e){  
        //获取触发事件组件的dataset属性  
        var _datasetId=e.target.dataset.id;  
        console.log("----"+_datasetId+"----");  
        var _obj={};  
        _obj.curHdIndex=_datasetId;  
        _obj.curBdIndex=_datasetId;  
        this.setData({  
          tabArr: _obj  
        });  
      },  
      onLoad: function( options ) {  
        alert( "------" );  
      }  
    });
    demo.wxss:
    .tab{  
       display: flex;  
       flex-direction: row;  
    }  
    .tab-left{  
        200rpx;  
       line-height: 160%;  
       border-right: solid 1px gray;  
    }  
    .tab-left view{  
       border-bottom: solid 1px red;  
    }  
    .tab-left .active{  
       color: #f00;  
    }  
    .tab-right{  
       line-height: 160%;  
    }  
    .tab-right .right-item{  
       padding-left: 15rpx;  
       display: none;  
    }  
    .tab-right .right-item.active{  
       display: block;  
    }  

     
    还有一个例子,没有测试
    https://www.jb51.net/article/161290.htm
     
     
    来源:https://zhuanlan.zhihu.com/p/35516810
     
  • 相关阅读:
    合成反应
    poj 2229 Sumsets(dp)
    poj 2229 Sumsets(dp)
    Redis 笔记与总结3 list 类型
    大数据时代 企业要跟得上潮流
    大数据时代 企业要跟得上潮流
    企业用好大数据只需这6招
    企业用好大数据只需这6招
    企业大数据运用实战案例分享
    企业大数据运用实战案例分享
  • 原文地址:https://www.cnblogs.com/youmingkuang/p/15758527.html
Copyright © 2011-2022 走看看