微信小程序之tab选项卡切换效果

下面是效果图

1.接下来我们通过对小程序的几个文件进行编写：

index.wxml 文件

<!--index.wxml-->
<view class='home_box'>
    <view class="bg_a"></view>
    <view class='home_ban'>
        <view class="{{currentActive==index?'home_top allShow':'home_top allHide'}}" wx:for="{{templateList}}" >
            <image class="home_top_hpone" src="{{item.img}}" ></image>
        </view>
        
        <view class='home_btn_box'>
            <text class="{{currentActive==index?'home_btn_item hight':'home_btn_item'}}" data-current="{{index}}" wx:for="{{templateList}}"  bindtap="changeMoban">{{item.title}}</text>
        </view>
    </view>
</view>

解析：
如果想在index.js中获取自定义的属性就按这种形式写data-xxxx例上图所示：data-current；index.js中通过e.currentTarget.dataset.xxx获取自定义属性例下图所示：e.currentTarget.dataset.current
index.js 文件

const app = getApp()
Page({
  data: {
    currentActive:0,
    templateList:[
         {
        img:'http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg',
        title:'标题1'
       },
       {
        img:'http://img18.3lian.com/d/file/201709/21/f498e01633b5b704ebfe0385f52bad20.jpg',
        title:'标题2'
       },
       {
        img:'http://hbimg.b0.upaiyun.com/7ec2d64a41cd2c89101ca25278cede0717dd8d0834250-ObT7Kv_fw658',
        title:'标题3'
       },
      ]
 },
  changeMoban:function(e) {
    // console.log(e.currentTarget.dataset);
    this.setData({
      currentActive:e.currentTarget.dataset.current
    });
  },
  onLoad: function () {
  }
})

index.wxss 文件

/**index.wxss start**/
ul,li{
   list-style: none;
}
.fl{
   float:left;
}
.fr{
   float: right;
}
.cb{
 clear: both;
}
.clearfix{zoom:1;}
.clearfix::after{ clear: both; display: block; content: ''; visibility: hidden;}
::-webkit-scrollbar {
   display: none;
}

.bg_a{
   height:100%;
   width:100%;
   position: fixed;
   top:0;
   left:0;
     z-index:-1;
     background:#f5f5f5;
}
.m_bg{
   height:100%;
   width:100%;
   position: fixed;
   top:0;
   left:0;
     z-index:-1;
     background:#f1f1f1;
}


.home_ban{
   padding:60rpx 90rpx 0;
   overflow:hidden;
}
.home_top{
   text-align:center;
}
.home_top_hpone{
   width:560rpx;
   height:750rpx;
}
.home_btn_box{
   padding:36rpx 0;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
}
.home_btn_item{
   display:block;
   text-align:center;
   width:15%;
   font-size:28rpx;
   color:#999;
   padding:25rpx 18rpx;
   border:1rpx solid #999;
   border-radius:10rpx;
   -webkit-border-radius:10rpx;
   background:#fff;
}
.hight{
   color:#0096e0;
   border:1px solid #0096e0;
}
.allHide{
   display:none;
}
.allShow{
   display:block;
}
/**index.wxss end**/