支付寶小程序擴展組件 列表·List

列表將數(shù)據(jù)呈現(xiàn)為可以分為平鋪和分組形式。使用列表以清單的形式干凈，高效地顯示大量或少量信息。一般來說，列表是基于文本內(nèi)容的理想選擇，也可以在列表中加入圖標(biāo)、按鈕、箭頭等其他元素擴展場景。

掃碼體驗

示例代碼

<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 使用介紹

當(dāng)需要使用無限循環(huán)列表時，可將 list 組件放置入到 scroll-view 中，根據(jù)需求對 scroll-view 添加相對應(yīng)的屬性，比如：

<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: [
     '馬不停蹄加載更多數(shù)據(jù)中...',
     '-- 已經(jīng)到底了，加不了咯 --',
   ],
 },
 onScrollToLower() {
   // 根據(jù)實際數(shù)據(jù)加載情況設(shè)定 loadMore 的值即可，分別為 load 和 over
   this.setData({
     loadMore: 'load',
   })
 },
})

slots