支付宝小程序扩展组件 列表·List

列表将数据呈现为可以分为平铺和分组形式。使用列表以清单的形式干净，高效地显示大量或少量信息。一般来说，列表是基于文本内容的理想选择，也可以在列表中加入图标、按钮、箭头等其他元素扩展场景。

扫码体验

示例代码

<view class="dyt-list" 
    style="position: relative;">
    <scroll-view style="height: 100vh;" 
        scroll-y onScrollToLower="onScrollToLower" 
        enable-back-to-top="true">
        <list>
            <view slot="header">
                列表头部
            </view>
                <block a:for="{{items}}">
                <list-item a:if="{{item.actionType==='switch'}}" 
                    thumb="{{thumbUrl}}" 
                    index="{{index}}" 
                    onClick="onSwitchClick" 
                    key="items-{{index}}" 
                    lineTouchable="{{item.lineTouchable}}" 
                    briefx="简要信息" 
                    upperSubtitle="{{item.brief}}"
                    last="{{index === (items.length - 1)}}">
                    {{item.title}}
                    <am-switch slot="extra" checked="{{changeSwitch}}"/>
                </list-item>
                <list-item a:elif="{{item.actionType ==='check'}}" 
                    thumb="{{thumbUrl}}" 
                    index="{{index}}" 
                    onClick="onCheckClick" 
                    key="items-{{index}}" 
                    last="{{index === (items.length - 1)}}">
                    {{item.title}}
                    <am-radio slot="extra" checked="{{changeCheckbox}}"/>
                </list-item>
                <list-item a:elif="{{item.actionType ==='capsule'}}" 
                    thumb="{{thumbUrl}}" 
                    index="{{index}}" 
                    onClick="onCapsuleClick" 
                    capsuleContent="{{item.capsuleContent}}" 
                    key="items-{{index}}" 
                    last="{{index === (items.length - 1)}}">
                    {{item.title}}
                    <button slot="extra" type="ghost" shape="capsule">胶囊按钮</button>
                </list-item>
                <list-item a:else thumbx="{{thumb}}" 
                    arrow="{{item.arrow}}" 
                    align="{{item.align}}" 
                    index="{{index}}" 
                    onClick="onItemClick" 
                    key="items-{{index}}" 
                    enforceExtra="{{item.enforceExtra}}" 
                    title="{{item.title}}" 
                    titlePosition="middle" 
                    last="{{index === (items.length - 1)}}">
                    {{item.title}}
                    <text slot="extra">{{item.extra}}</text>
                </list-item>
            </block>
            <view slot="footer">
                列表尾部
            </view>
        </list>
        <list>
            <view slot="header">
                列表头部
            </view>
            <block a:for="{{items2}}">
                <list-item thumb="{{item.thumb}}" 
                    arrow="{{item.arrow}}" 
                    onClick="onItemClick" 
                    index="items2-{{index}}" 
                    key="items2-{{index}}" 
                    data-filed="aaa" 
                    title="{{item.title}}" 
                    upperSubtitle="{{item.brief}}" 
                    last="{{index === (items2.length - 1)}}">
                    {{item.title}}
                    <view a:if="{{item.extra}}" 
                        slot="extra">
                        {{item.extra}}
                    </view>
                </list-item>
            </block>
            <view slot="footer">
                列表尾部
            </view>
        </list>
        <list>
            <view slot="header">
                列表头部
            </view>
            <block a:for="{{items3}}">
                <list-item thumb="{{item.thumb}}" 
                    arrow="{{item.arrow}}" 
                    index="items3-{{index}}" 
                    onClick="onItemClick" 
                    key="items3-{{index}}" 
                    last="{{index === (items3.length - 1)}}" 
                    upperSubtitle="{{item.brief}}" 
                    multipleLine="{{true}}">
                    {{item.title}}
                    <view a:if="{{item.extra}}" 
                        slot="extra">
                        {{item.extra}}
                    </view>
                </list-item>
            </block>
            <view slot="footer">
                列表尾部
            </view>
        </list>
        <list>
            <view slot="header">
                列表头部
            </view>
            <block a:for="{{items4}}">
                <list-item thumb="{{item.thumb}}" 
                    arrow="{{item.arrow}}" 
                    onClick="onItemClick" 
                    index="items4-{{index}}" 
                    last="{{index === (items4.length - 1)}}" 
                    key="items4-{{index}}" 
                    upperSubtitle="{{item.upperSubtitle}}" 
                    lowerSubtitle="{{item.upperSubtitle}}" 
                    titlePosition="{{item.titlePosition}}"
                    >
                    {{item.title}}
                    <view a:if="{{item.extra}}" 
                        slot="extra">
                        {{item.extra}}
                    </view>
                </list-item>
            </block>
            <view slot="footer">
                列表尾部
            </view>
        </list>
        <list>
            <view slot="header">
                小图文列表
            </view>
            <block a:for="{{itemsThumb}}">
                <list-item thumb="{{item.thumb}}" 
                    arrow="{{item.arrow}}" 
                    onClick="onItemClick" 
                    index="itemsThumb-{{index}}" 
                    last="{{index === (itemsThumb.length - 1)}}" 
                    brief="{{item.brief}}" 
                    thumbSize="30"
                    key="itemsThumb-{{index}}">
                    {{item.title}}
                    <view a:if="{{item.extra}}" 
                        slot="extra">
                        {{item.extra}}
                    </view>
                </list-item>
            </block>
        </list>
        <list>
            <view slot="header">
                小图文双行列表
            </view>
            <block a:for="{{itemsThumbMultiple}}">
                <list-item thumb="{{item.thumb}}" 
                    arrow="{{item.arrow}}" 
                    onClick="onItemClick" 
                    index="items-multiple-{{index}}" 
                    last="{{index === (itemsThumbMultiple.length - 1)}}" 
                    key="items-multiple-{{index}}" 
                    upperSubtitle="{{item.brief}}" 
                    thumbSize="30"
                    multipleLineX="{{true}}">
                    {{item.title}}
                    <view a:if="{{item.extra}}" 
                        slot="extra">
                        {{item.extra}}
                    </view>
                </list-item>
            </block>
        </list>
        <list loadMore="{{loadMore}}" 
            loadContent="{{loadContent}}">
            <view slot="header">
                无限滚动列表
            </view>
            <block a:for="{{items5}}">
                <list-item className="{{item.sticky ? 'am-list-sticky' : ''}}" 
                    thumb="{{item.thumb}}" 
                    thumbSize="30"
                    arrow="{{item.arrow}}" 
                    align="{{item.align}}" 
                    last="{{index === (items5.length - 1)}}" 
                    index="{{index}}" 
                    key="items5-{{index}}" 
                    onClick="onItemClick" 
                    disabled="{{item.sticky}}" 
                    wrap="{{true}}">
                    {{item.title}}{{index}}
                    <view a:if="{{item.extra}}" 
                        slot="extra">
                        {{item.extra}}
                    </view>
                </list-item>
            </block>
        </list>
    </scroll-view>
</view>

属性

loadMore 使用介绍

当需要使用无限循环列表时，可将 list 组件放置入到 scroll-view 中，根据需求对 scroll-view 添加相对应的属性，比如：

<scroll-view style="height: 80vh;" scroll-y onScrollToLower="onScrollToLower" enable-back-to-top="true">
 <list loadMore="{{loadMore}}" loadContent="{{loadContent}}">
   <list-item>...</list-item>
 </list>
</scroll-view>

Page({
 data: {
   loadMore: '',
   loadContent: [
     '马不停蹄加载更多数据中...',
     '-- 已经到底了，加不了咯 --',
   ],
 },
 onScrollToLower() {
   // 根据实际数据加载情况设定 loadMore 的值即可，分别为 load 和 over
   this.setData({
     loadMore: 'load',
   })
 },
})

slots