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

属性