支付宝小程序 UI·历史记录-生活缴费

本示例主要展示生活缴费的历史记录，可帮助用户快速查询生活缴费的时间、类型以及具体金额。

使用说明

• 本示例为纯客户端代码，可直接在模拟器和在真机预览。
• 更多详情请参见 代码市场。

使用指南

安装

在 IDE 安装以下依赖

npm i mashi-open-snippets --save

注册

在 JSON 中引入组件路径

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

调用

分别在 AXML、JS、ACSS 中输入以下代码

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

Page({
  data: {
    list1: {
      // title: '06月 缴费 ￥196.40',
      list: [{
        icon: 'https://gw.alipayobjects.com/mdn/industry_l/afts/img/A*6AlQS6dH7f8AAAAAAAAAAABkARQnAQ',
        mainTitle: '06-19 电费',
        subTitle: '汇丰公寓***1室 | *凯',
        // extra: {
        //   value: '-143.70',
        //   description: '缴费已到账'
        // }
      },
      {
        icon: 'https://gw.alipayobjects.com/mdn/industry_l/afts/img/A*ynQZSKnQi1sAAAAAAAAAAABkARQnAQ',
        mainTitle: '06-19 水费',
        subTitle: '汇丰公寓***1室 | *凯',
        // extra: {
        //   value: '-143.70',
        //   description: '缴费已到账'
        // }
      },
      {
        icon: 'https://gw.alipayobjects.com/mdn/industry_l/afts/img/A*1qSJTL5fXD4AAAAAAAAAAABkARQnAQ',
        mainTitle: '06-19 燃气费',
        subTitle: '汇丰公寓***1室 | *凯',
        // extra: {
        //   value: '-143.70',
        //   description: '缴费已到账'
        // }
      }]
    },
    list2: {
      title: '06月 缴费 ￥196.40',
      list: [{
        icon: 'https://gw.alipayobjects.com/mdn/industry_l/afts/img/A*6AlQS6dH7f8AAAAAAAAAAABkARQnAQ',
        mainTitle: '05-19 电费',
        subTitle: '汇丰公寓***1室 | *凯',
        extra: {
          value: '-143.70',
          description: '缴费已到账'
        }
      },
      {
        icon: 'https://gw.alipayobjects.com/mdn/industry_l/afts/img/A*ynQZSKnQi1sAAAAAAAAAAABkARQnAQ',
        mainTitle: '05-19 电费',
        subTitle: '汇丰公寓***1室 | *凯',
        extra: {
          value: '-143.70',
          description: '缴费已到账'
        }
      }]
    }
  },
  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;
}

属性

属性	类型	默认值	描述
data	Object	{}	接收一个对象，title 属性若不传则没有 title 行，extra 属性如果不传，则列表最右侧默认有一个小箭头
containerClassName	String	""	容器类名