百度智能小程序 列表項(xiàng)

list-item 列表項(xiàng)

解釋：列表項(xiàng)，支持三種樣式可配，單行、多行列表、左右布局等，具體可看代碼示例。適用于信息展示，并可放置在頁面的任何位置。

屬性說明

示例 

在開發(fā)者工具中打開

代碼示例

<view class="list-item-container">
    <block s-for="{{list}}">
        <block s-if="{{item.type === 'single'}}">
            <view class="title">{{item.title}}</view>
            <smt-list-item
                s-for="{{item.list}}"
                label="{{item.label}}"
                smt-label="smt-label"
                smt-content="smt-content"
                content="{{item.content}}"
                disable="{{item.disable}}"
            ></smt-list-item>
        </block>
        <block s-if="{{item.type === 'list'}}">
            <view class="title">{{item.title}}</view>
            <smt-list-item
                type="list"
                smt-list-label="smt-list-label"
                smt-list-content="smt-list-content"
                title="{{item.listTitle}}"
                list="{{item.list}}"
            ></smt-list-item>
        </block>
        <block s-if="{{item.type === 'multiple'}}">
            <view class="title">{{item.title}}</view>
            <smt-list-item
                type="multiple"
                list="{{item.list}}"
            ></smt-list-item>
        </block>
    </block>
</view>

Page({
    data: {
        list: [
            {
                type: 'single',
                title: '默認(rèn)樣式',
                list: [
                    {
                        label: '四字標(biāo)題',
                        content: '展示文字內(nèi)容信息'
                    },
                    {
                        label: '六字標(biāo)題排版',
                        content: '展示超長文字內(nèi)容信息'
                    }
                ]
            },
            {
                type: 'single',
                title: '多行內(nèi)容樣式',
                list: [
                    {
                        label: '超出六字標(biāo)題折行',
                        content: '展示超長文字內(nèi)容信息超出后折行顯示，展示超長文字內(nèi)容信息超出后折行顯示'
                    }
                ]
            },
            {
                type: 'single',
                title: '可跳轉(zhuǎn)樣式',
                list: [
                    {
                        label: '四字標(biāo)題',
                        content: '展示文字內(nèi)容信息',
                        disable: true
                    },
                    {
                        label: '六字標(biāo)題排版',
                        content: '展示超長文字內(nèi)容信息',
                        disable: true
                    },
                    {
                        label: '六字標(biāo)題排版',
                        content: '長短標(biāo)題混排時，統(tǒng)一按最長標(biāo)題排版',
                        disable: true
                    }
                ]
            },
            {
                type: 'single',
                title: '長短標(biāo)題混排規(guī)則',
                list: [
                    {
                        label: '四字標(biāo)題',
                        content: '展示長文字信息內(nèi)容超出后折行顯示'
                    },
                    {
                        label: '六字標(biāo)題排版',
                        content: '長短標(biāo)題混排時，統(tǒng)一按最長標(biāo)題排版'
                    }
                ]
            },
            {
                type: 'list',
                title: '多行多列列表',
                listTitle: '標(biāo)題信息超長文本內(nèi)容展示，超出一行內(nèi)容折行顯示',
                list: [
                    {
                        label: '四字標(biāo)題',
                        content: '展示文字內(nèi)容信息'
                    },
                    {
                        label: '六字及以上標(biāo)題',
                        content: '展示超長文字內(nèi)容信息'
                    },
                    {
                        label: '六字標(biāo)題排版',
                        content: '展示文本內(nèi)容信息'
                    }
                ]
            },
            {
                type: 'multiple',
                title: '左右文字雙行',
                list: [
                    {
                        label: '標(biāo)題內(nèi)容信息',
                        content: '輔助信息'
                    },
                    {
                        label: '標(biāo)題內(nèi)容信息',
                        content: '輔助信息'
                    }
                ]
            }
        ]
    }
});

.smt-label {
    <!-- 可通過此 class 修改標(biāo)題區(qū)左側(cè)文案樣式。 -->
}

.smt-content {
    <!-- 可通過此 class 修改標(biāo)題區(qū)右側(cè)文案樣式。 -->
}

.smt-list-label {
    <!-- 可通過此 class 修改列表區(qū)左側(cè)文案樣式。 -->
}

.smt-list-content {
    <!-- 可通過此 class 修改列表區(qū)右側(cè)文案樣式。 -->
}

{
    "navigationBarTitleText": "列表項(xiàng)",
    "usingComponents": {
        "smt-list-item": "@smt-ui/component/src/list-item"
    }
}