微信小程序 擴(kuò)展組件·選項(xiàng)卡組件

tabs

選項(xiàng)卡組件。

<view class="page">
  <mp-tabs 
    tabs="{{tabs}}" 
    activeTab="{{activeTab}}" 
    swiperClass="weui-tabs-swiper"
    bindtabclick="onTabClick"
    bindchange="onChange"
    activeClass="tab-bar-title__selected">
    <block wx:for="{{tabs}}" wx:key="title">
      <view class="tab-content" data-set="{{item}}" slot="tab-content-{{index}}" bind:tap="handleClick" >
        <image src="{{item.img}}" mode="widthFix"></image>
        <view class="item-title">
          {{item.title2}}
        </view>
        <view class="item-desc">
          {{item.desc}}
        </view>
      </view>
    </block>
  </mp-tabs>
  </view>

Page({
  onShareAppMessage() {
    return {
      title: 'tabs',
      path: 'page/weui/example/tabs/tabs'
    }
  },
  data: {
    tabs: [],
    activeTab: 0,
  },
  onLoad() {
    const tabs = [
      {
        title: '技術(shù)開發(fā)',
        title2: '小程序開發(fā)進(jìn)階',
        img: 'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSEV5QjxLDJaL6ibHLSZ02TIcve0ocPXrdTVqGGbqAmh5Mw9V7504dlEiatSvnyibibHCrVQO2GEYsJicPA/0?wx_fmt=jpeg',
        desc: '本視頻系列課程，由騰訊課堂NEXT學(xué)院與微信團(tuán)隊(duì)聯(lián)合出品，通過實(shí)戰(zhàn)案例，深入淺出地進(jìn)行講解。',
      },
      {
        title: '產(chǎn)品解析',
        title2: '微信小程序直播',
        img: 'http://mmbiz.qpic.cn/sz_mmbiz_png/GEWVeJPFkSHALb0g5rCc4Jf5IqDfdwhWJ43I1IvriaV5uFr9fLAuv3uxHR7DQstbIxhNXFoQEcxGzWwzQUDBd6Q/0?wx_fmt=png',
        desc: '微信小程序直播系列課程持續(xù)更新中，幫助大家更好地理解、應(yīng)用微信小程序直播功能。',
      },
      {
        title: '運(yùn)營規(guī)范',
        title2: '常見問題和解決方案',
        img: 'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSGqys4ibO2a8L9nnIgH0ibjNXfbicNbZQQYfxxUpmicQglAEYQ2btVXjOhY9gRtSTCxKvAlKFek7sRUFA/0?wx_fmt=jpeg',
        desc: '提高審核質(zhì)量',
      },
      {
        title: '營銷經(jīng)驗(yàn)',
        title2: '流量主小程序',
        img: 'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSH2Eic4Lt0HkZeEN08pWXTticVRgyNGgBVHMJwMtRhmB0hE4m4alSuwsBk3uBBOhdCr91bZlSFbYhFg/0?wx_fmt=jpeg',
        desc: '本課程共四節(jié)，將分階段為開發(fā)者展示如何開通流量主功能、如何接入廣告組件、不同類型小程序接入的建議，以及如何通過工具調(diào)優(yōu)小程序變現(xiàn)效率。',
      },
      {
        title: '高校大賽',
        title2:'2020中國高校計(jì)算機(jī)大賽',
        img: 'http://mmbiz.qpic.cn/mmbiz_jpg/TcDuyasB5T3Eg34AYwjMw7xbEK2n01ekiaicPiaMInEMTkOQtuv1yke5KziaYF4MLia4IAbxlm0m5NxkibicFg4IZ92EA/0?wx_fmt=jpeg',
        desc: '微信小程序應(yīng)用開發(fā)賽',
      },
    ]
    this.setData({ tabs })
  },
  onTabClick(e) {
    const index = e.detail.index
    this.setData({ 
      activeTab: index 
    })
  },
  onChange(e) {
    const index = e.detail.index
    this.setData({ 
      activeTab: index 
    })
  },
  handleClick(e) {
    wx.navigateTo({
      url: './webview',
    })
  }
})

屬性列表

注意事項(xiàng)

• 內(nèi)容區(qū)域采用 <swiper>進(jìn)行滾動，超出部分將被隱藏，需設(shè)置 swiperClass 的高度與子元素一致。
• 內(nèi)容區(qū)域子元素需指定 slot=tab-content-index，其中 index 為選項(xiàng)卡的下標(biāo)（從0開始）。