支付宝小程序 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;
}

属性