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
     
  • 相关阅读:
    winform中Dock的布局规则
    如何为VS添加编写NHibernate配置文件智能提示的功能
    c# winform 给PictureBox控件添上滚动条,使用滚动条来查看图片,panel滚动条
    Nhibernate使用中遇到的问题
    Best gotchas of C++/CLI
    关于progressbar
    对象序列化
    10个非常不错的CSS技巧
    清除浮动
    Sublime Text2 常用快捷键
  • 原文地址:https://www.cnblogs.com/youmingkuang/p/15758527.html
Copyright © 2011-2022 走看看