支付宝小程序 UI·选项卡

本快速示例实现了横纵自由切换的选项卡，可用于商品分类导航等场景。

使用说明

• 本示例为纯客户端代码，可直接在模拟器和在真机预览。
• 更多详情请参见 代码市场。

使用指南

安装

在 IDE 安装以下依赖

npm i mashi-open-snippets --save

注册

在 JSON 中引入组件路径

{


  "usingComponents": {


    "tab-list": "mashi-open-snippets/es/tab-list/index"


  }


}

调用

分别在 AXML、JS、ACSS 中输入以下代码

<!-- 我是最外圈 -->
<view class="atd-index">
  <view class="header" >
    <button type="{{type ? type : 'primary'}}"  size="mini" onTap="defaultTaptop">top</button>
    <button type="{{top ? top : 'default'}}" size="mini" onTap="defaultTapleft" style="margin-left:40rpx;">left</button>
  </view>
  <!-- tab title -->
  <view class="content">
    <tab-list tabs="{{tabs}}" left="{{left}}" / >
  </view>
</view>

Page({


  data: {


    tabs: [


      { title: 'Page', anchor: 'a', pageList: [{ title: '水印', extra: '表单水印' }, { title: '验证码', extra: '手机验证码' }] },


      { title: '组件', anchor: 'b', badgeText: '新', pageList: [{ title: 'View', extra: 'View' }, { title: 'Swiper', extra: 'Swiper' }, { title: 'View', extra: 'View' }, { title: 'Swiper', extra: 'Swiper' }, { title: 'View', extra: 'View' }, { title: 'Swiper', extra: 'Swiper' }, { title: 'Swiper', extra: 'Swiper' }, { title: 'Swiper', extra: 'Swiper' }, { title: 'Swiper', extra: 'Swiper' }] },


    ],


    left: true,


    type: '',


    top: '',


  },


  onLoad() {},


  defaultTaptop() {


    this.setData({


      left: true,


      type: 'primary',


      top: 'default',


    });


  },


  defaultTapleft() {


    this.setData({


      left: false,


      type: 'default',


      top: 'primary',


    });


  },


});

.atd-index {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.atd-index .header {
  padding: 20rpx 40rpx;
}
.atd-index .content {
  display: flex;
  justify-content: center;
  flex: 1;
}

属性

属性	类型	默认值	描述	必填
tabs	Number	-	tab 数据，其中包括选项标题 title，以及副标题（描述）文案 subTitle，以及胶囊形式 tab 中的字符串 title 与 extra。	是
left	Boolean	false	默认为纵向选项卡, 为 true时是横向选项卡，为 false 时为纵向选项卡	否