百度智能小程序 列表项

list-item 列表项

解释：列表项，支持三种样式可配，单行、多行列表、左右布局等，具体可看代码示例。适用于信息展示，并可放置在页面的任何位置。

属性说明

示例 

在开发者工具中打开

代码示例

<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: '默认样式',
                list: [
                    {
                        label: '四字标题',
                        content: '展示文字内容信息'
                    },
                    {
                        label: '六字标题排版',
                        content: '展示超长文字内容信息'
                    }
                ]
            },
            {
                type: 'single',
                title: '多行内容样式',
                list: [
                    {
                        label: '超出六字标题折行',
                        content: '展示超长文字内容信息超出后折行显示，展示超长文字内容信息超出后折行显示'
                    }
                ]
            },
            {
                type: 'single',
                title: '可跳转样式',
                list: [
                    {
                        label: '四字标题',
                        content: '展示文字内容信息',
                        disable: true
                    },
                    {
                        label: '六字标题排版',
                        content: '展示超长文字内容信息',
                        disable: true
                    },
                    {
                        label: '六字标题排版',
                        content: '长短标题混排时，统一按最长标题排版',
                        disable: true
                    }
                ]
            },
            {
                type: 'single',
                title: '长短标题混排规则',
                list: [
                    {
                        label: '四字标题',
                        content: '展示长文字信息内容超出后折行显示'
                    },
                    {
                        label: '六字标题排版',
                        content: '长短标题混排时，统一按最长标题排版'
                    }
                ]
            },
            {
                type: 'list',
                title: '多行多列列表',
                listTitle: '标题信息超长文本内容展示，超出一行内容折行显示',
                list: [
                    {
                        label: '四字标题',
                        content: '展示文字内容信息'
                    },
                    {
                        label: '六字及以上标题',
                        content: '展示超长文字内容信息'
                    },
                    {
                        label: '六字标题排版',
                        content: '展示文本内容信息'
                    }
                ]
            },
            {
                type: 'multiple',
                title: '左右文字双行',
                list: [
                    {
                        label: '标题内容信息',
                        content: '辅助信息'
                    },
                    {
                        label: '标题内容信息',
                        content: '辅助信息'
                    }
                ]
            }
        ]
    }
});

.smt-label {
    <!-- 可通过此 class 修改标题区左侧文案样式。 -->
}

.smt-content {
    <!-- 可通过此 class 修改标题区右侧文案样式。 -->
}

.smt-list-label {
    <!-- 可通过此 class 修改列表区左侧文案样式。 -->
}

.smt-list-content {
    <!-- 可通过此 class 修改列表区右侧文案样式。 -->
}

{
    "navigationBarTitleText": "列表项",
    "usingComponents": {
        "smt-list-item": "@smt-ui/component/src/list-item"
    }
}