微信小程序开发文档微信小程序扩展组件·选项卡组件

2024-02-25 开发教程微信小程序开发文档匿名 3℃

tabs

选项卡组件。

<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: '技术开发',
        title2: '小程序开发进阶',
        img: 'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSEV5QjxLDJaL6ibHLSZ02TIcve0ocPXrdTVqGGbqAmh5Mw9V7504dlEiatSvnyibibHCrVQO2GEYsJicPA/0?wx_fmt=jpeg',
        desc: '本视频系列课程，由腾讯课堂NEXT学院与微信团队联合出品，通过实战案例，深入浅出地进行讲解。',
      },
      {
        title: '产品解析',
        title2: '微信小程序直播',
        img: 'http://mmbiz.qpic.cn/sz_mmbiz_png/GEWVeJPFkSHALb0g5rCc4Jf5IqDfdwhWJ43I1IvriaV5uFr9fLAuv3uxHR7DQstbIxhNXFoQEcxGzWwzQUDBd6Q/0?wx_fmt=png',
        desc: '微信小程序直播系列课程持续更新中，帮助大家更好地理解、应用微信小程序直播功能。',
      },
      {
        title: '运营规范',
        title2: '常见问题和解决方案',
        img: 'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSGqys4ibO2a8L9nnIgH0ibjNXfbicNbZQQYfxxUpmicQglAEYQ2btVXjOhY9gRtSTCxKvAlKFek7sRUFA/0?wx_fmt=jpeg',
        desc: '提高审核质量',
      },
      {
        title: '营销经验',
        title2: '流量主小程序',
        img: 'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSH2Eic4Lt0HkZeEN08pWXTticVRgyNGgBVHMJwMtRhmB0hE4m4alSuwsBk3uBBOhdCr91bZlSFbYhFg/0?wx_fmt=jpeg',
        desc: '本课程共四节，将分阶段为开发者展示如何开通流量主功能、如何接入广告组件、不同类型小程序接入的建议，以及如何通过工具调优小程序变现效率。',
      },
      {
        title: '高校大赛',
        title2:'2020中国高校计算机大赛',
        img: 'http://mmbiz.qpic.cn/mmbiz_jpg/TcDuyasB5T3Eg34AYwjMw7xbEK2n01ekiaicPiaMInEMTkOQtuv1yke5KziaYF4MLia4IAbxlm0m5NxkibicFg4IZ92EA/0?wx_fmt=jpeg',
        desc: '微信小程序应用开发赛',
      },
    ]
    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',
    })
  }
})

属性列表

属性	类型	默认值	必填	说明
tabs	Array	[]	是	数据项格式为 `{title}`
tab-class	String		否	选项卡样式
swiper-class	String		否	内容区域 swiper 的样式
active-class	String		否	选中项样式
tab-underline-color	String	#07c160	否	选中项下划线颜色
tab-active-text-color	String	#000000	否	选中项字体颜色
tab-inactive-text-color	String	#000000	否	未选中项字体颜色
tab-background-color	String	#ffffff	否	选项卡背景颜色
active-tab	Number	0	否	激活 tab 索引
duration	Number	500	否	内容区域切换时长
bindtabclick	eventhandle		否	点击 tab 时触发，e.detail={index}
bindchange	eventhandle		否	内容区域滚动导致 tab 变化时触发, e.detail={index}

注意事项

内容区域采用 <swiper>进行滚动，超出部分将被隐藏，需设置 swiperClass 的高度与子元素一致。
内容区域子元素需指定 slot=tab-content-index，其中 index 为选项卡的下标（从0开始）。

上一节：微信小程序扩展组件·粘性布局组件

下一节：微信小程序扩展组件·row/col 组件

"微信小程序开发文档"的目录

微信小程序开发文档 微信小程序 扩展组件·选项卡组件

tabs

属性列表

注意事项

微信小程序开发文档微信小程序扩展组件·选项卡组件