小程序tab效果

页面效果如下：

image

image

  开发
  介绍
  设计


00000000
1111111
222222

/* pages/home/home.wxss */
.list{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list view{
  flex: 1;
  text-align: center;
  padding: 3px 5px;
}
.list .active{
  border-bottom: 4rpx solid red;
}

// pages/home/home.js
Page({
  tab(e){
    console.log(e)
    //通过e.currentTarget.dataset.id访问data-id
    let index = parseInt(e.currentTarget.dataset.id) 
    this.setData({
      dataIndex: index
    })
  },
  /**
   * 页面的初始数据
   */
  data: {
    //设置初始dataIndex为0，这样第一个view显示active
    dataIndex:0
  }
})

emmmm文章写的比较粗糙，见谅啦！~~~~~