微信小程序实现tab切换

   小程序tab切换实现，相比套用UI框架，这样可以随心自定义

话不多说直接代码：

    
       
        {{item.name}}
        
      此处加内容
    
  
js:
// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    navBar:[
      {
        name:'品牌',
        id:0,
        hover: true
      },
      {
        name:'联系',
        id:1,
        hover: false
      },
      {
        name:'微电影',
        id:2,
        hover: false
      },
      {
        name: '新疆',
        id:3,
        hover: false,
        list: ['喀什','乌鲁木齐','吐鲁番','叶城']
      },
      {
        name: '青海',
        id:4,
        hover: false,
        list: ['西宁','格尔木','德令哈']
      },
      {
        name: '成都',
        id:5,
        hover: false,
        list: ['都江堰','青城山','武侯祠','怀远古镇','熊猫基地']
      },
      {
        name: '海南',
        id:6,
        hover: false,
        list: ['三亚','','海口','三沙']
      },
    ]
  },
  onNavClick: function(e){
    let ele = e.target.dataset.item
    this.data.navBar.forEach(function(item, index){
      ele.id === item.id? item.hover = true : item.hover = false
    })
    this.setData({
      navBar: this.data.navBar
    })
  },
})
wxss：
.flex-wrp{
  margin-top: 60rpx;
  display:flex;
}
.flex-left{
  width: 160rpx;
  height: 1000rpx;
  font-size: 26rpx;
}
.flex-right{
  /* margin: 0 auto; */
  width: 580rpx;
  height: 1000rpx;
}
.flex-item-V{
  width: 100%;
  height: 100rpx;
  text-align: center;
  color: rgb(143, 145, 144);
  border-right: 1rpx solid #ccc;
}
.actClass{
  color: rgb(2, 42, 66);
}