zoukankan      html  css  js  c++  java
  • 微信小程序——tab导航栏

    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>
     
    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( "------" );
     }
    });
     
    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;
    }
     
    原文:http://www.jb51.net/article/96095.htm
     
     
     
  • 相关阅读:
    yii2:如果获取config/web.php配置的值?
    yii2:引用项目外的文件或类
    yii2: oracle汉字占用字节长度
    yii2: oralce中文,有的汉字是2个字节,有的汉字是3个字节
    yii2:frontend/frontactoin curl生成
    Appium做Android功能自动化测试
    appium server日志分析
    appium的初始化准备工作
    Appium的Java封装
    使用Runtime.getRuntime().exec()在java中调用python脚本
  • 原文地址:https://www.cnblogs.com/wangyuyuan/p/7299473.html
Copyright © 2011-2022 走看看