zoukankan      html  css  js  c++  java
  • 小程序的一个tab切换

    <view class="tab-left" bindtap="tab">  
      <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  
      },  
    },
     /**
         * tab切换
         */
        tab: function(e) {
            var dataId = e.currentTarget.id;
            var obj = {};
            obj.curHdIndex = dataId;
            obj.curBdIndex = dataId;
            this.setData({
                tabArr: obj
            })
        },
    
  • 相关阅读:
    Python-异常处理机制
    递归函数——斐波那契数列j
    函数及相关操作
    字符串及相关操作
    集合及相关操作
    元组
    字典
    列表元素增删改排操作
    multiprocessing模块简单应用
    02 for循环创建进程
  • 原文地址:https://www.cnblogs.com/lwwen/p/6369376.html
Copyright © 2011-2022 走看看