微信小程序选项卡的实现方法

一 wxml

   
       第一项
       第二项
       第三项
       第四项
   
   
       
           
           
           
           
       
   

二wxss

.content{
  width:100%;
}
.menu{
 font-size: 28rpx;
 color: #262626;
 line-height: 80rpx;
 background: #fff;
 display: flex;
 align-items: center;
 justify-content: space-around;
 box-shadow: 0 1px 0 0 #f5f5f5;
}
.menuTitle{
 border-bottom: 3px solid transparent;
 color:#262626;
}
.goods{
  width:100%;
  height:300rpx;
  overflow: hidden;
}
.item{
  width:100%;
  height:300rpx;
}
.borders{
 border-bottom: 4rpx solid #f00;
 color:#f00;
}

三js

Page({
  data: {
    ind:0
  },
  title:function(e){
    var index = e.currentTarget.dataset.index;
    this.setData({
      ind: index
    });
  }
})