支付宝小程序 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 时为纵向选项卡 | 否 |