更新记录

1.0.0（2023-05-03） 下载此版本

完成

平台兼容性

List 列表

参数

插槽

示例

基础用法

<ayi-list-item label="账单"></ayi-list-item>

带图标

<ayi-list-item label="神仙">
    <template #icon>
        <image src="/static/avatar.png" class="img" />
    </template>
</ayi-list-item>

带描述

<ayi-list-item label="余额">
    <ayi-text type="price" :size="30" :value="13.14"></ayi-text>
</ayi-list-item>

禁用

<ayi-list-item label="手机号" disabled>
    <text>130****1111</text>
</ayi-list-item>

滑动

<ayi-list-item label="向右滑动" swipe="left">
    <template #menu>
        <ayi-button class="ts" type="primary">置顶</ayi-button>
        <ayi-button class="ts" type="error">删除</ayi-button>
    </template>
</ayi-list-item>
<style lang="scss" scoped>
    .ts {
        :deep(.ayi-button) {
            height: 100rpx !important;
            border-radius: 0 !important;
            margin: 0;
        }
    }
</style>

<ayi-list-item label="向左滑动" swipe="right">
    <template #menu>
        <ayi-button class="ts" type="primary">置顶</ayi-button>
        <ayi-button class="ts" type="error">删除</ayi-button>
    </template>
</ayi-list-item>
<style lang="scss" scoped>
    .ts {
        :deep(.ayi-button) {
            height: 100rpx !important;
            border-radius: 0 !important;
            margin: 0;
        }
    }
</style>

自定义

<ayi-list-item justify="start">
    <ayi-row type="flex" align="middle">
        <ayi-avatar><ayi-icon name="my" :size="40"></ayi-icon></ayi-avatar>
        <ayi-text value="无语" :margin="[0, 0, 0, 10]"></ayi-text>
    </ayi-row>
    <template #append>
        <ayi-button>修改头像</ayi-button>
    </template>
</ayi-list-item>

按钮组

<ayi-list>
    <ayi-list-item label="A"></ayi-list-item>
    <ayi-list-item label="B"></ayi-list-item>
    <ayi-list-item label="C"></ayi-list-item>
</ayi-list>