微信小程序前端Tab切换内容代码

微信小程序常用的小交互效果，简单的tab切换，点击菜单选项，切换到对应指数的内容模块。

wxml代码

<view class="tabBtn">
	<block wx:for="{{tabBtn}}" wx:key="index">
	<view class="item{{curTab == index ? ' active' : ''}}" bindtap="clickTab" data-idx="{{index}}">{{item}}</view>
	</block>
</view>

<view class="tabItem">
	<block wx:for="{{tabItem}}" wx:key="index">
	<view class="item{{curTab == index ? ' active' : ''}}" data-list="{{index}}">
	{{item}}
	</view>
	</block>
</view>

wxss代码

.tabBtn {
  font-size:0;
  line-height: normal;
  text-align:center;
  margin-bottom:40rpx;
}
.tabBtn .item {
  font-size:24rpx;
  color:#666;
  display:inline-block;
  vertical-align: top;
  line-height: 42rpx;
  margin:0 18rpx;  
}
.tabBtn .active {
  font-weight:bold;
  color:#000;
}
.tabItem .item {
  display:none;
}
.tabItem .active {
  display:block;
}

js代码

Page({
	data: {
		tabBtn:['按钮一','按钮二','按钮三','按钮四'],
		curTab:0,
		tabItem:['内容一','内容二','内容三','内容四'],		
	},
	
	clickTab: function(e){
		if(this.data.curTab == e.target.dataset.idx){
		  return;
		}
		this.setData({
		  curTab:e.target.dataset.idx,
		})
	},
})