微信小程序之头部tab切换实现

实现头部tab点击切换效果

一、实际效果

二、代码参考

test.wxml

<!-- 头部 -->
<view class="tabcontent">
  <block wx:for="{
  {tabs}}" wx:key="*this">
    <view id="{
  {index}}" class="tabcell {
  { activeIndex==index?'active':'' }} " bindtap="tabClick">
      {
  {item}}
    </view>
  </block>
</view>

---

test.wxss

.tabcontent {
  width: 100%;
  background: #fff;
  display: flex;
  border-top: 1px solid #f2f5fa;
  border-bottom: 1px solid #f2f5fa;
}

.tabcell {
  width: 50%;
  line-height: 44