小程序tab效果

页面效果如下：

image

<!--pages/home/home.wxml-->
<view class="list">
<!-- 变量为dataIndex所以需存初始值在js文件的data里面，通过改变此值控制切换 -->
<!-- 通过class="{{dataIndex===0?'active':''}}"设置active样式随dataIndex而变 -->
  <view bindtap="tab" data-id='0' class="{{dataIndex===0?'active':''}}">开发</view>
  <view bindtap="tab" data-id='1' class="{{dataIndex===1?'active':''}}">介绍</view>
  <view bindtap="tab" data-id='2' class="{{dataIndex===2?'active':''}}">设计</view>
</view>
<!-- 通过wx:if设置此div是否出现 -->
<view wx:if="{{dataIndex===0}}">00000000</view>
<view wx:if="{{dataIndex===1}}">1111111</view>
<view wx:if="{{dataIndex===2}}">222222</view>

/* 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文章写的比较粗糙，见谅啦！~~~~~

小程序tab效果

推荐阅读更多精彩内容