支付寶小程序 UI·選項(xiàng)卡

本快速示例實(shí)現(xiàn)了橫縱自由切換的選項(xiàng)卡，可用于商品分類導(dǎo)航等場景。

使用說明

• 本示例為純客戶端代碼，可直接在模擬器和在真機(jī)預(yù)覽。
• 更多詳情請參見 代碼市場。

使用指南

安裝

在 IDE 安裝以下依賴

npm i mashi-open-snippets --save

注冊

在 JSON 中引入組件路徑

{


  "usingComponents": {


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


  }


}

調(diào)用

分別在 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: '驗(yàn)證碼', extra: '手機(jī)驗(yàn)證碼' }] },


      { 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;
}

屬性