• 微信小程序——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
     
     
     
  • 相关阅读:
    利用Python 统计txt 文档词频 次数
    Markdown工具Typora结合gitee码云图床自动上传云端图片
    主数据MDM下发eHR系统操作整理v1.0
    Python读取Excel数据生成图表 v2.0
    HTML基础(20200610)
    Python网络编程socket 简易聊天窗
    selenium-python-验证码-动态验证码
    selenium-python-验证码-滑动验证码
    Linux系统学习 20200506
    @Mapper @Insert 注解式方法批量入库(ORACLE数据库)
  • 原文地址:https://www.cnblogs.com/wangyuyuan/p/7299473.html
Copyright © 2020-2023  润新知