tab切换及其对比总结

描述：tab切换一个简单的小功能，在pc端还是在移动端总是可以预见使用的情况，下面总结一下tab切换的实现。tab切换简单来讲就是某一个标题下对应某一块内容。

jquery实现最简单的tab切换，主要使用的就是display：none 和 display：inline-block 属性，控制显示和隐藏。主要代码如下：

		<div class="content">
			<ul>
				<li class="active">页面一</li>
				<li>页面二</li>
				<li>页面三</li>
			</ul>
			<div class="container show">
				内容一
			</div>
			<div class="container">
				内容二
			</div>
			<div class="container">
				内容三
			</div>
		</div>

主要实现为添加class和移除class，不用this值，使用事件委托实现。

		$("ul").on("click",function(e){
			$("ul li").removeClass("active");
			var e=window.event || e;
			var target=e.target || e.srcElement;
			$(target).addClass("active");
			$(".container").removeClass("show");
			$($(".container").eq($(target).index())).addClass("show");
		})

小程序实现tab切换

    两个tab之间的切换，和原生js雷同，原理就是点击当前的节点显示需要的信息内容，再点击其他的就是当前显示的隐藏，需要的在显示出来。具体实现如下：

<!--tab切换对应的切换按钮-->
<view class="page-tab">
    <button class="btn" type="{{selected?'primary':'default'}}" bindtap="selected">页面一</button>
    <button class="btn" type="{{selected1?'primary':'default'}}" bindtap="selected1">页面二</button>
</view>
<!--对应的切换页面，当button类型为primary时显示页面-->
<view class="content {{selected?'show':'hide'}}">内容一</view>
<view class="content {{selected1?'show':'hide'}}">内容二</view>

点击事件的重新赋值实现：

  selected:function(){
      this.setData({
        selected:true,
        selected1:false
      })
  },
  selected1:function(){
    this.setData({
      selected1: true,
      selected: false
    })
  }

多个tab之间的切换，大于两个的实现方法，原因一：tab切换的标签是一样的所以可以找到具体点击的哪一个index，找index对应的显示页面即可。具体实现如下，结合两个之间的切换更容易理解。

<view class="view-section">
      <block wx:for="{{items}}" wx:key="uniqued">
        <view class="btn {{selected == index ? 'show':'hide'}}" bindtap="btn" data-index="{{index}}">{{item.name}}</view>
      </block>
</view>
<view class="view-section1">
      <block wx:for="{{yemians}}" wx:key="uniqued">
        <view class="content {{selected == index ? 'show1':'hide1'}}">{{item.content}}</view>
      </block>
</view>

显示数据：

    items:[
      { id: 0, uniqued: 0, name: "页面一" },
      { id: 1, uniqued: 1, name: "页面二" },
      { id: 2, uniqued: 2, name: "页面三" },
      { id: 3, uniqued: 3, name: "页面四" }
    ],
    yemians:[
      { id: 0, uniqued: 0, content: "内容一" },
      { id: 1, uniqued: 1, content: "内容二" },
      { id: 2, uniqued: 2, content: "内容三" },
      { id: 3, uniqued: 3, content: "内容四" }
    ],
    selected:0,
  },

切换页面：

  btn:function(e){
    var index=e.currentTarget.dataset.index;
    this.setData({
      selected: index
    })
  }

vue实现tab切换：创建切换按钮，核心变换切换按钮的下标进行判断显示。

		<div id="app">
			<!--创建切换的点击按钮-->
			<ul>
				<li v-for="(item,index) in tabs" v-bind:class="{active:index == num}"
             		v-on:click="tab(index)">{{item}}
				</li>
			</ul>
			<!--创建切换的页面-->
	        <div v-for='(content,index) in contents'  v-show="index == num">
	        	{{content}}
	        </div>
		</div>

		new Vue({
			el:"#app",
			data:{
				tabs:["页面一","页面二","页面三"],
				contents:["内容一","内容二","内容三"],
				num:0
			},
			methods:{
				tab(e){
					this.num=e;
				}
			}
		})

总结：jquery和小程序和vue的共同点：都是通过获取点击元素的下标改变切换内容（index值为关键点）

        不同点：jquery的操作都在显示层展现，小程序和vue可以在逻辑层展现，使其代码精简。

参考位置：https://github.com/yijianchuanxinwq/tabs.git