zoukankan      html  css  js  c++  java
  • 小程序的tab切换事件

    index.wxml代码

    <view class="tab-left" > 
      <view class="{{tabArr.curHdIndex=='0'? 'active' : ''}}" id="1"  data-id="1" bindtap="tab">tab-hd01</view> 
      <view class="{{tabArr.curHdIndex=='1'? 'active' : ''}}" id="2"  data-id="2" bindtap="tab">tab-hd02</view> 
      <view class="{{tabArr.curHdIndex=='2'? 'active' : ''}}" id="3"  data-id="3" bindtap="tab">tab-hd03</view> 
      <view class="{{tabArr.curHdIndex=='3'? 'active' : ''}}" id="4"  data-id="4" bindtap="tab">tab-hd04</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> 

    index.wxss代码

    .tab-left .active{color: #ff0000}
    .tab-right .right-item{display: none}
    .tab-right .right-item.active{display: block}

    index.js代码

    Page({
      data:{
    
        // tab 切换
        tabArr: {
          curHdIndex: 0,
          curBdIndex: 0
        }, 
    
      },
      //tab切换
      tab: function (e) {
        //var dataId = e.currentTarget.dataset.id;
        var dataId = e.currentTarget.id;
        var obj = {};
        obj.curHdIndex = dataId;
        obj.curBdIndex = dataId;
        this.setData({
          tabArr: obj
        })
        //console.log(e);
      },  
        
    })

    参数传递

    在view上绑定id和data-id 都可以传递两个参数,然后用bindtap绑定事件,就可以传递两个参数值

    获取参数

    用tab:function(e){}可以获取参数,可以console.log(e) 打印出来。用

    var dataId = e.currentTarget.dataset.id;
    var dataId = e.currentTarget.id;

    就可以获取到两个不同的id参数

    剩下的就可以为所欲为了

  • 相关阅读:
    PHP $_SERVER 变量
    $_SERVER变量 以及 PHP 使用 $_SERVER['PHP_SELF'] 获取当前页面地址及其安全性问题
    Funs
    搞定,务必记得要以最简便的整合资源来做
    还是要好好研究开源的php
    重回编程
    登录弹窗代码(居中)
    测试工具了解指南
    工作总结1
    HTML5 contextmenu隐藏鼠标右键菜单
  • 原文地址:https://www.cnblogs.com/wesky/p/8064131.html
Copyright © 2011-2022 走看看