支付寶小程序 UI·歷史記錄-生活繳費(fèi)

本示例主要展示生活繳費(fèi)的歷史記錄，可幫助用戶快速查詢生活繳費(fèi)的時(shí)間、類型以及具體金額。

使用說明

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

使用指南

安裝

在 IDE 安裝以下依賴

npm i mashi-open-snippets --save

?注冊

在 JSON 中引入組件路徑

{
  "usingComponents": {
    "tab-list": "mashi-open-snippets/es/payment-records/es/index"
  }}

調(diào)用

分別在 AXML、JS、ACSS 中輸入以下代碼

<view class="payment-records-page">
    <view>
        <payment-records data="{{list1}}" />
    </view>
    <payment-records data="{{list2}}" />
</view>

Page({
  data: {
    list1: {
      // title: '06月 繳費(fèi) ￥196.40',
      list: [{
        icon: 'https://gw.alipayobjects.com/mdn/industry_l/afts/img/A*6AlQS6dH7f8AAAAAAAAAAABkARQnAQ',
        mainTitle: '06-19 電費(fèi)',
        subTitle: '匯豐公寓***1室 | *凱',
        // extra: {
        //   value: '-143.70',
        //   description: '繳費(fèi)已到賬'
        // }
      },
      {
        icon: 'https://gw.alipayobjects.com/mdn/industry_l/afts/img/A*ynQZSKnQi1sAAAAAAAAAAABkARQnAQ',
        mainTitle: '06-19 水費(fèi)',
        subTitle: '匯豐公寓***1室 | *凱',
        // extra: {
        //   value: '-143.70',
        //   description: '繳費(fèi)已到賬'
        // }
      },
      {
        icon: 'https://gw.alipayobjects.com/mdn/industry_l/afts/img/A*1qSJTL5fXD4AAAAAAAAAAABkARQnAQ',
        mainTitle: '06-19 燃?xì)赓M(fèi)',
        subTitle: '匯豐公寓***1室 | *凱',
        // extra: {
        //   value: '-143.70',
        //   description: '繳費(fèi)已到賬'
        // }
      }]
    },
    list2: {
      title: '06月 繳費(fèi) ￥196.40',
      list: [{
        icon: 'https://gw.alipayobjects.com/mdn/industry_l/afts/img/A*6AlQS6dH7f8AAAAAAAAAAABkARQnAQ',
        mainTitle: '05-19 電費(fèi)',
        subTitle: '匯豐公寓***1室 | *凱',
        extra: {
          value: '-143.70',
          description: '繳費(fèi)已到賬'
        }
      },
      {
        icon: 'https://gw.alipayobjects.com/mdn/industry_l/afts/img/A*ynQZSKnQi1sAAAAAAAAAAABkARQnAQ',
        mainTitle: '05-19 電費(fèi)',
        subTitle: '匯豐公寓***1室 | *凱',
        extra: {
          value: '-143.70',
          description: '繳費(fèi)已到賬'
        }
      }]
    }
  },
  onLoad() { },
});

.payment-records-page {
    background-color:rgb(248, 248, 248);
    padding:16px 12px;
    height:100vh;
    box-sizing:border-box;
}
.payment-records-page > view {
    margin-bottom:24rpx;
}

屬性