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
     
     
     
  • 相关阅读:
    分布式_理论_03_2PC
    分布式_理论_02_Base 理论
    分布式_理论_01_CAP定理
    分布式_理论_00_资源帖
    Git_学习_09_指定某些文件不上传
    Java_脚本引擎_03_nashorn支持es6
    Idea_学习_10_Idea远程debug
    Mybatis_总结_06_用_插件开发
    Mybatis_总结_05_用_Java API
    【BZOJ】2212: [Poi2011]Tree Rotations
  • 原文地址:https://www.cnblogs.com/wangyuyuan/p/7299473.html
Copyright © 2011-2022 走看看