• 微信小程序——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
     
     
     
  • 相关阅读:
    Extjs4.0中清空filefield已选文件
    .net操作读取word中的图像并保存
    WebForm_PostBackOptions未定义 错误排查
    数据库关键字
    VS2008生成WebSite和WebApplication的区别(转载)
    安装天乙论坛(SSH架构的开源项目)时遇到的问题
    Hibernate与Oracle char类型的列之间的兼容问题
    关于spring3使用AOP编程时需要引入哪些jar包的问题
    让IE支持HTML5的Canvas
    IIS + TOMCAT 注意事项
  • 原文地址:https://www.cnblogs.com/wangyuyuan/p/7299473.html
Copyright © 2020-2023  润新知