【微信小程序】之顶部选项卡自定义tabs（不用mp-tabs扩展组件，太难用了）

<view class="tabs">
  <view class="tab-item" wx:for="{{tabs}}" wx:for-index="idx" wx:key="*this" bindtap="tabTap" data-index="{{idx}}" data-item="{{item}}" data-active="{{curIdx===idx}}">
    <p>{{item.title}}</p>
  </view>
</view>
<view wx:if="curData">
  <image style="width:100%" src="{{curData.imgUrl}}" mode="aspectFit" />
  <p>{{curData.desc}}</p>
</view>

.tabs {
  width: 100%;
  display: flex;
  justify-content: center;
}
 
.tab-item {
  font-size: 28rpx;
  height: 40rpx;
  background: white;
  box-sizing: border-box;
  padding-top: 20rpx;
  padding-bottom: 60rpx;
  padding-left: 20rpx;
  padding-right: 20rpx;
  border-bottom: 5rpx solid #00000033;
}
 
.tab-item[data-active=true] {
  border-color: lightseagreen;
  color: lightseagreen;
  font-weight: bold;
}

Page({
  data: {
    tabs: [{
      id:1,
        title: '技术开发',
        imgUrl: 'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSEV5QjxLDJaL6ibHLSZ02TIcve0ocPXrdTVqGGbqAmh5Mw9V7504dlEiatSvnyibibHCrVQO2GEYsJicPA/0?wx_fmt=jpeg',
        desc: '本视频系列课程，由腾讯课堂NEXT学院与微信团队联合出品，通过实战案例，深入浅出地进行讲解。',
      },
      {
        id:2,
        title: '产品解析',
        imgUrl: 'http://mmbiz.qpic.cn/sz_mmbiz_png/GEWVeJPFkSHALb0g5rCc4Jf5IqDfdwhWJ43I1IvriaV5uFr9fLAuv3uxHR7DQstbIxhNXFoQEcxGzWwzQUDBd6Q/0?wx_fmt=png',
        desc: '微信小程序直播系列课程持续更新中，帮助大家更好地理解、应用微信小程序直播功能。',
      },
      {
        id:3,
        title: '运营规范',
        title2: '常见问题和解决方案',
        imgUrl: 'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSGqys4ibO2a8L9nnIgH0ibjNXfbicNbZQQYfxxUpmicQglAEYQ2btVXjOhY9gRtSTCxKvAlKFek7sRUFA/0?wx_fmt=jpeg',
        desc: '提高审核质量',
      },
      {
        id:4,
        title: '营销经验',
        desc: '本课程共四节，将分阶段为开发者展示如何开通流量主功能、如何接入广告组件、不同类型小程序接入的建议，以及如何通过工具调优小程序变现效率。',
      },
      {
        id:5,
        title: '高校大赛',
        imgUrl: 'http://mmbiz.qpic.cn/mmbiz_jpg/TcDuyasB5T3Eg34AYwjMw7xbEK2n01ekiaicPiaMInEMTkOQtuv1yke5KziaYF4MLia4IAbxlm0m5NxkibicFg4IZ92EA/0?wx_fmt=jpeg',
        desc: '微信小程序应用开发赛',
      },
    ],
    curIdx:0,
    curData: [],
  },
  tabTap(e) {
    console.log(e.currentTarget.dataset);
    this.setData({
      curIdx:e.currentTarget.dataset.index,
      curData: e.currentTarget.dataset.item
    })
  },
})