diff --git a/docs/component/uniui/uni-list.md b/docs/component/uniui/uni-list.md index 984209df279acbcf1409b6fd7f6a27ece754ee57..7e70fbacd8e353c2c8a7253f2c0316ed22929286 100644 --- a/docs/component/uniui/uni-list.md +++ b/docs/component/uniui/uni-list.md @@ -1,335 +1,335 @@ -::: tip 组件名：uni-list -> 代码块： `uList`、`uListItem` -> 关联组件：`uni-list-item`、`uni-badge`、`uni-icons`、`uni-list-chat` - -[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-list) -::: - -List 列表组件，包含基本列表样式、可扩展插槽机制、长列表性能优化、多端兼容。 - -在vue页面里，它默认使用页面级滚动。在app-nvue页面里，它默认使用原生list组件滚动。这样的长列表，在滚动出屏幕外后，系统会回收不可见区域的渲染内存资源，不会造成滚动越长手机越卡的问题。 - -uni-list组件是父容器，里面的核心是uni-list-item子组件，它代表列表中的一个可重复行，子组件可以无限循环。 - -uni-list-item有很多风格，uni-list-item组件通过内置的属性，满足一些常用的场景。当内置属性不满足需求时，可以通过扩展插槽来自定义列表内容。 - -内置属性可以覆盖的场景包括：导航列表、设置列表、小图标列表、通信录列表、聊天记录列表。 - -涉及很多大图或丰富内容的列表，比如类今日头条的新闻列表、类淘宝的电商列表，需要通过扩展插槽实现。 - -下文均有样例给出。 - -uni-list不包含下拉刷新和上拉翻页。上拉翻页另见组件：[uni-load-more](https://ext.dcloud.net.cn/plugin?id=29) - - -## 介绍 -::: warning 注意事项 -> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。 -- 组件需要依赖 `sass` 插件 ，请自行手动安装 -- 组件内部依赖 `'uni-icons'` 、`uni-badge` 组件 -- `uni-list` 和 `uni-list-item` 需要配套使用，暂不支持单独使用 `uni-list-item` -- 只有开启点击反馈后，会有点击选中效果 -- 使用插槽时，可以完全自定义内容 -- note 、rightText 属性暂时没做限制，不支持文字溢出隐藏，使用时应该控制长度显示或通过默认插槽自行扩展 -- 支付宝小程序平台需要在支付宝小程序开发者工具里开启 component2 编译模式，开启方式： 详情 --> 项目配置 --> 启用 component2 编译 -- 如果需要修改 `switch`、`badge` 样式，请使用插槽自定义 -- 在 `HBuilderX` 低版本中，可能会出现组件显示 `undefined` 的问题，请升级最新的 `HBuilderX` 或者 `cli` -::: - -### 基本用法 - -- 设置 `title` 属性，可以显示列表标题 -- 设置 `disabled` 属性，可以禁用当前项 - -```html - - - - - -``` - -### 多行内容显示 - -- 设置 `note` 属性 ，可以在第二行显示描述文本信息 - -```html - - - - - -``` - -### 右侧显示角标、switch - -- 设置 `show-badge` 属性 ，可以显示角标内容 -- 设置 `show-switch` 属性，可以显示 switch 开关 - -```html - - - - - -``` - -### 左侧显示略缩图、图标 - -- 设置 `thumb` 属性 ，可以在列表左侧显示略缩图 -- 设置 `show-extra-icon` 属性，并指定 `extra-icon` 可以在左侧显示图标 - -```html - - - - -``` - -### 开启点击反馈和右侧箭头 -- 设置 `clickable` 为 `true` ，则表示这是一个可点击的列表，会默认给一个点击效果，并可以监听 `click` 事件 -- 设置 `link` 属性，会自动开启点击反馈，并给列表右侧添加一个箭头 -- 设置 `to` 属性，可以跳转页面，`link` 的值表示跳转方式，如果不指定，默认为 `navigateTo` - -```html - - - - - - - -``` - - -### 聊天列表示例 -- 设置 `clickable` 为 `true` ，则表示这是一个可点击的列表，会默认给一个点击效果，并可以监听 `click` 事件 -- 设置 `link` 属性，会自动开启点击反馈，`link` 的值表示跳转方式，如果不指定，默认为 `navigateTo` -- 设置 `to` 属性，可以跳转页面 -- `time` 属性，通常会设置成时间显示，但是这个属性不仅仅可以设置时间，你可以传入任何文本，注意文本长度可能会影响显示 -- `avatar` 和 `avatarList` 属性同时只会有一个生效，同时设置的话，`avatarList` 属性的长度大于1 ，`avatar` 属性将失效 -- 可以通过默认插槽自定义列表右侧内容 - -::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/list/chat - -> Template -```html - - - - - - - - - - - - - - - - - 刚刚 - - - - - - - -``` -> Script -```javascript - -export default { - components: {}, - data() { - return { - avatarList: [{ - url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png' - }, { - url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png' - }, { - url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png' - }] - } - } -} - -``` - -> Style -```css - -.chat-custom-right { - flex: 1; - /* #ifndef APP-NVUE */ - display: flex; - /* #endif */ - flex-direction: column; - justify-content: space-between; - align-items: flex-end; -} - -.chat-custom-text { - font-size: 12px; - color: #999; -} - -``` - -::: -## API - -### List Props - -|属性名|类型|默认值|说明| -|:-:|:-:|:-:|:-: | -|border|Boolean|true|是否显示边框| - -### ListItem Props - -|属性名|类型|默认值|说明| -|:-:|:-:|:-:|:-:| -|title|String|-|标题| -|note|String|-| 描述| -|ellipsis|Number|0| title 是否溢出隐藏，可选值，0:默认; 1:显示一行; 2:显示两行;| -|thumb|String|-|左侧缩略图，若thumb有值，则不会显示扩展图标| -|thumbSize|String|medium|略缩图尺寸，可选值，lg:大图; medium:一般; sm:小图;| -|showBadge|Boolean|false|是否显示数字角标 | -|badgeText|String|-|数字角标内容| -|badgeType|String|-|数字角标类型，参考[uni-icons](https://ext.dcloud.net.cn/plugin?id=21) | -|badgeStyle |Object |- | 数字角标样式，使用uni-badge的custom-style参数| -|rightText|String|-|右侧文字内容| -|disabled|Boolean|false|是否禁用 | -|showArrow|Boolean|true|是否显示箭头图标 | -|link|String|navigateTo |新页面跳转方式，可选值见下表| -|to|String|-|新页面跳转地址，如填写此属性，click 会返回页面是否跳转成功| -|clickable|Boolean |false| 是否开启点击反馈| -|showSwitch|Boolean |false| 是否显示Switch| -|switchChecked|Boolean|false|Switch是否被选中| -|showExtraIcon|Boolean|false|左侧是否显示扩展图标| -|extraIcon|Object|-|扩展图标参数，格式为 ``{color: '#4cd964',size: '22',type: 'spinner'}``，参考 [uni-icons](https://ext.dcloud.net.cn/plugin?id=28)| -|direction| String|row| 排版方向，可选值，row:水平排列; column:垂直排列; 3个插槽是水平排还是垂直排，也受此属性控制| - - -#### Link Options - -属性名|说明 -:-:|:-: -navigateTo|同 uni.navigateTo() -redirectTo|同 uni.reLaunch() -reLaunch|同 uni.reLaunch() -switchTab|同 uni.switchTab() - -### ListItem Events - -|事件称名|说明|返回参数| -|:-:|:-:|:-: | -|click|点击 uniListItem 触发事件，需开启点击反馈 |- | -|switchChange|点击切换 Switch 时触发，需显示 switch|e={value:checked} | - - - -### ListItem Slots - -|名称 | 说明 | -|:-: | :-: | -|header | 左/上内容插槽，可完全自定义默认显示| -|body | 中间内容插槽，可完全自定义中间内容| -|footer | 右/下内容插槽，可完全自定义右侧内容 | - - -> **通过插槽扩展** -> 需要注意的是当使用插槽时，内置样式将会失效，只保留排版样式，此时的样式需要开发者自己实现 -> 如果 `uni-list-item` 组件内置属性样式无法满足需求，可以使用插槽来自定义uni-list-item里的内容。 -> uni-list-item提供了3个可扩展的插槽：`header`、`body`、`footer` -> - 当 `direction` 属性为 `row` 时表示水平排列，此时 `header` 表示列表的左边部分，`body` 表示列表的中间部分，`footer` 表示列表的右边部分 -> - 当 `direction` 属性为 `column` 时表示垂直排列，此时 `header` 表示列表的上边部分，`body` 表示列表的中间部分，`footer` 表示列表的下边部分 -> 开发者可以只用1个插槽，也可以3个一起使用。在插槽中可自主编写view标签，实现自己所需的效果。 - - -**示例** - -```html - - - - - - - - - - - - - -``` - - - - - -### ListItemChat Props - -|属性名|类型|默认值|说明| -|:-:|:-:|:-:|:-: | -|title|String|-| 标题| -|note|String|-|描述| -|clickable|Boolean|false| 是否开启点击反馈| -|badgeText|String|-| 数字角标内容，设置为 `dot` 将显示圆点| -|badgePositon|String|right| 角标位置| -|link|String|navigateTo| 是否展示右侧箭头并开启点击反馈，可选值见下表| -|clickable|Boolean|false| 是否开启点击反馈| -|to|String|-|跳转页面地址，如填写此属性，click 会返回页面是否跳转成功 | -|time|String|-| 右侧时间显示| -|avatarCircle|Boolean|false| 是否显示圆形头像| -|avatar|String|-|头像地址，avatarCircle 不填时生效| -|avatarList|Array|-| 头像组，格式为 [{url:''}]| - -#### Link Options - -|属性名 | 说明| -|:-: | :-:| -|navigateTo | 同 uni.navigateTo()| -|redirectTo | 同 uni.reLaunch()| -|reLaunch | 同 uni.reLaunch()| -|switchTab | 同 uni.switchTab()| - -### ListItemChat Slots - -|名称 | 说明 | -|:- | :- | -|default | 自定义列表右侧内容（包括时间和角标显示）| - -### ListItemChat Events -|事件称名|说明|返回参数| -|:-:|:-:|:-: | -|@click|点击 uniListChat 触发事件 | {data:{}} ，如有 to 属性，会返回页面跳转信息 | - - - -## 示例 -::: warning 注意 -示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。 - -请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-link) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。 -::: - -::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/list/list -> Template -``` html +::: tip 组件名：uni-list +> 代码块： `uList`、`uListItem` +> 关联组件：`uni-list-item`、`uni-badge`、`uni-icons`、`uni-list-chat` + +[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-list) +::: + +List 列表组件，包含基本列表样式、可扩展插槽机制、长列表性能优化、多端兼容。 + +在vue页面里，它默认使用页面级滚动。在app-nvue页面里，它默认使用原生list组件滚动。这样的长列表，在滚动出屏幕外后，系统会回收不可见区域的渲染内存资源，不会造成滚动越长手机越卡的问题。 + +uni-list组件是父容器，里面的核心是uni-list-item子组件，它代表列表中的一个可重复行，子组件可以无限循环。 + +uni-list-item有很多风格，uni-list-item组件通过内置的属性，满足一些常用的场景。当内置属性不满足需求时，可以通过扩展插槽来自定义列表内容。 + +内置属性可以覆盖的场景包括：导航列表、设置列表、小图标列表、通信录列表、聊天记录列表。 + +涉及很多大图或丰富内容的列表，比如类今日头条的新闻列表、类淘宝的电商列表，需要通过扩展插槽实现。 + +下文均有样例给出。 + +uni-list不包含下拉刷新和上拉翻页。上拉翻页另见组件：[uni-load-more](https://ext.dcloud.net.cn/plugin?id=29) + + +## 介绍 +::: warning 注意事项 +> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。 +- 组件需要依赖 `sass` 插件 ，请自行手动安装 +- 组件内部依赖 `'uni-icons'` 、`uni-badge` 组件 +- `uni-list` 和 `uni-list-item` 需要配套使用，暂不支持单独使用 `uni-list-item` +- 只有开启点击反馈后，会有点击选中效果 +- 使用插槽时，可以完全自定义内容 +- note 、rightText 属性暂时没做限制，不支持文字溢出隐藏，使用时应该控制长度显示或通过默认插槽自行扩展 +- 支付宝小程序平台需要在支付宝小程序开发者工具里开启 component2 编译模式，开启方式： 详情 --> 项目配置 --> 启用 component2 编译 +- 如果需要修改 `switch`、`badge` 样式，请使用插槽自定义 +- 在 `HBuilderX` 低版本中，可能会出现组件显示 `undefined` 的问题，请升级最新的 `HBuilderX` 或者 `cli` +::: + +### 基本用法 + +- 设置 `title` 属性，可以显示列表标题 +- 设置 `disabled` 属性，可以禁用当前项 + +```html + + + + + +``` + +### 多行内容显示 + +- 设置 `note` 属性 ，可以在第二行显示描述文本信息 + +```html + + + + + +``` + +### 右侧显示角标、switch + +- 设置 `show-badge` 属性 ，可以显示角标内容 +- 设置 `show-switch` 属性，可以显示 switch 开关 + +```html + + + + + +``` + +### 左侧显示略缩图、图标 + +- 设置 `thumb` 属性 ，可以在列表左侧显示略缩图 +- 设置 `show-extra-icon` 属性，并指定 `extra-icon` 可以在左侧显示图标 + +```html + + + + +``` + +### 开启点击反馈和右侧箭头 +- 设置 `clickable` 为 `true` ，则表示这是一个可点击的列表，会默认给一个点击效果，并可以监听 `click` 事件 +- 设置 `link` 属性，会自动开启点击反馈，并给列表右侧添加一个箭头 +- 设置 `to` 属性，可以跳转页面，`link` 的值表示跳转方式，如果不指定，默认为 `navigateTo` + +```html + + + + + + + +``` + +::: +## API + +### List Props + +|属性名|类型|默认值|说明| +|:-:|:-:|:-:|:-: | +|border|Boolean|true|是否显示边框| + +### ListItem Props + +|属性名|类型|默认值|说明| +|:-:|:-:|:-:|:-:| +|title|String|-|标题| +|note|String|-| 描述| +|ellipsis|Number|0| title 是否溢出隐藏，可选值，0:默认; 1:显示一行; 2:显示两行;| +|thumb|String|-|左侧缩略图，若thumb有值，则不会显示扩展图标| +|thumbSize|String|medium|略缩图尺寸，可选值，lg:大图; medium:一般; sm:小图;| +|showBadge|Boolean|false|是否显示数字角标 | +|badgeText|String|-|数字角标内容| +|badgeType|String|-|数字角标类型，参考[uni-icons](https://ext.dcloud.net.cn/plugin?id=21) | +|badgeStyle |Object |- | 数字角标样式，使用uni-badge的custom-style参数| +|rightText|String|-|右侧文字内容| +|disabled|Boolean|false|是否禁用 | +|showArrow|Boolean|true|是否显示箭头图标 | +|link|String|navigateTo |新页面跳转方式，可选值见下表| +|to|String|-|新页面跳转地址，如填写此属性，click 会返回页面是否跳转成功| +|clickable|Boolean |false| 是否开启点击反馈| +|showSwitch|Boolean |false| 是否显示Switch| +|switchChecked|Boolean|false|Switch是否被选中| +|showExtraIcon|Boolean|false|左侧是否显示扩展图标| +|extraIcon|Object|-|扩展图标参数，格式为 ``{color: '#4cd964',size: '22',type: 'spinner'}``，参考 [uni-icons](https://ext.dcloud.net.cn/plugin?id=28)| +|direction| String|row| 排版方向，可选值，row:水平排列; column:垂直排列; 3个插槽是水平排还是垂直排，也受此属性控制| + + +#### Link Options + +属性名|说明 +:-:|:-: +navigateTo|同 uni.navigateTo() +redirectTo|同 uni.reLaunch() +reLaunch|同 uni.reLaunch() +switchTab|同 uni.switchTab() + +### ListItem Events + +|事件称名|说明|返回参数| +|:-:|:-:|:-: | +|click|点击 uniListItem 触发事件，需开启点击反馈 |- | +|switchChange|点击切换 Switch 时触发，需显示 switch|e={value:checked} | + + + +### ListItem Slots + +|名称 | 说明 | +|:-: | :-: | +|header | 左/上内容插槽，可完全自定义默认显示| +|body | 中间内容插槽，可完全自定义中间内容| +|footer | 右/下内容插槽，可完全自定义右侧内容 | + + +> **通过插槽扩展** +> 需要注意的是当使用插槽时，内置样式将会失效，只保留排版样式，此时的样式需要开发者自己实现 +> 如果 `uni-list-item` 组件内置属性样式无法满足需求，可以使用插槽来自定义uni-list-item里的内容。 +> uni-list-item提供了3个可扩展的插槽：`header`、`body`、`footer` +> - 当 `direction` 属性为 `row` 时表示水平排列，此时 `header` 表示列表的左边部分，`body` 表示列表的中间部分，`footer` 表示列表的右边部分 +> - 当 `direction` 属性为 `column` 时表示垂直排列，此时 `header` 表示列表的上边部分，`body` 表示列表的中间部分，`footer` 表示列表的下边部分 +> 开发者可以只用1个插槽，也可以3个一起使用。在插槽中可自主编写view标签，实现自己所需的效果。 + + +**示例** + +```html + + + + + + + + + + + + + +``` + + + + + +### ListItemChat Props + +|属性名|类型|默认值|说明| +|:-:|:-:|:-:|:-: | +|title|String|-| 标题| +|note|String|-|描述| +|clickable|Boolean|false| 是否开启点击反馈| +|badgeText|String|-| 数字角标内容，设置为 `dot` 将显示圆点| +|badgePositon|String|right| 角标位置| +|link|String|navigateTo| 是否展示右侧箭头并开启点击反馈，可选值见下表| +|clickable|Boolean|false| 是否开启点击反馈| +|to|String|-|跳转页面地址，如填写此属性，click 会返回页面是否跳转成功 | +|time|String|-| 右侧时间显示| +|avatarCircle|Boolean|false| 是否显示圆形头像| +|avatar|String|-|头像地址，avatarCircle 不填时生效| +|avatarList|Array|-| 头像组，格式为 [{url:''}]| + +#### Link Options + +|属性名 | 说明| +|:-: | :-:| +|navigateTo | 同 uni.navigateTo()| +|redirectTo | 同 uni.reLaunch()| +|reLaunch | 同 uni.reLaunch()| +|switchTab | 同 uni.switchTab()| + +### ListItemChat Slots + +|名称 | 说明 | +|:- | :- | +|default | 自定义列表右侧内容（包括时间和角标显示）| + +### ListItemChat Events +|事件称名|说明|返回参数| +|:-:|:-:|:-: | +|@click|点击 uniListChat 触发事件 | {data:{}} ，如有 to 属性，会返回页面跳转信息 | + +### 聊天列表示例 +- 设置 `clickable` 为 `true` ，则表示这是一个可点击的列表，会默认给一个点击效果，并可以监听 `click` 事件 +- 设置 `link` 属性，会自动开启点击反馈，`link` 的值表示跳转方式，如果不指定，默认为 `navigateTo` +- 设置 `to` 属性，可以跳转页面 +- `time` 属性，通常会设置成时间显示，但是这个属性不仅仅可以设置时间，你可以传入任何文本，注意文本长度可能会影响显示 +- `avatar` 和 `avatarList` 属性同时只会有一个生效，同时设置的话，`avatarList` 属性的长度大于1 ，`avatar` 属性将失效 +- 可以通过默认插槽自定义列表右侧内容 + +::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/list/chat + +> Template +```html + + + + + + + + + + + + + + + + + 刚刚 + + + + + + + +``` +> Script +```javascript + +export default { + components: {}, + data() { + return { + avatarList: [{ + url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png' + }, { + url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png' + }, { + url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png' + }] + } + } +} + +``` + +> Style +```css + +.chat-custom-right { + flex: 1; + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: column; + justify-content: space-between; + align-items: flex-end; +} + +.chat-custom-text { + font-size: 12px; + color: #999; +} + +``` + + + + +## 示例 +::: warning 注意 +示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。 + +请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-link) ，在页面右侧选择 `使用 HBuilderX导入示例项目` ，体验完整组件示例。 +::: + +::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/list/list +> Template +``` html -``` - -> Script +``` + +> Script ``` html -``` +``` > Style ``` html - -``` -::: - -[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/list/list) - - - -## 基于uni-list扩展的页面模板 - -通过扩展插槽，可实现多种常见样式的列表 - -**新闻列表类** - -1. 云端一体混合布局：[https://ext.dcloud.net.cn/plugin?id=2546](https://ext.dcloud.net.cn/plugin?id=2546) -2. 云端一体垂直布局，大图模式：[https://ext.dcloud.net.cn/plugin?id=2583](https://ext.dcloud.net.cn/plugin?id=2583) -3. 云端一体垂直布局，多行图文混排：[https://ext.dcloud.net.cn/plugin?id=2584](https://ext.dcloud.net.cn/plugin?id=2584) -4. 云端一体垂直布局，多图模式：[https://ext.dcloud.net.cn/plugin?id=2585](https://ext.dcloud.net.cn/plugin?id=2585) -5. 云端一体水平布局，左图右文：[https://ext.dcloud.net.cn/plugin?id=2586](https://ext.dcloud.net.cn/plugin?id=2586) -6. 云端一体水平布局，左文右图：[https://ext.dcloud.net.cn/plugin?id=2587](https://ext.dcloud.net.cn/plugin?id=2587) -7. 云端一体垂直布局，无图模式，主标题+副标题：[https://ext.dcloud.net.cn/plugin?id=2588](https://ext.dcloud.net.cn/plugin?id=2588) - -**商品列表类** - -1. 云端一体列表/宫格视图互切：[https://ext.dcloud.net.cn/plugin?id=2651](https://ext.dcloud.net.cn/plugin?id=2651) -2. 云端一体列表（宫格模式）：[https://ext.dcloud.net.cn/plugin?id=2671](https://ext.dcloud.net.cn/plugin?id=2671) -3. 云端一体列表（列表模式）：[https://ext.dcloud.net.cn/plugin?id=2672](https://ext.dcloud.net.cn/plugin?id=2672) - + + +``` +::: + +[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/list/list) + + + +## 基于uni-list扩展的页面模板 + +通过扩展插槽，可实现多种常见样式的列表 + +**新闻列表类** + +1. 云端一体混合布局：[https://ext.dcloud.net.cn/plugin?id=2546](https://ext.dcloud.net.cn/plugin?id=2546) +2. 云端一体垂直布局，大图模式：[https://ext.dcloud.net.cn/plugin?id=2583](https://ext.dcloud.net.cn/plugin?id=2583) +3. 云端一体垂直布局，多行图文混排：[https://ext.dcloud.net.cn/plugin?id=2584](https://ext.dcloud.net.cn/plugin?id=2584) +4. 云端一体垂直布局，多图模式：[https://ext.dcloud.net.cn/plugin?id=2585](https://ext.dcloud.net.cn/plugin?id=2585) +5. 云端一体水平布局，左图右文：[https://ext.dcloud.net.cn/plugin?id=2586](https://ext.dcloud.net.cn/plugin?id=2586) +6. 云端一体水平布局，左文右图：[https://ext.dcloud.net.cn/plugin?id=2587](https://ext.dcloud.net.cn/plugin?id=2587) +7. 云端一体垂直布局，无图模式，主标题+副标题：[https://ext.dcloud.net.cn/plugin?id=2588](https://ext.dcloud.net.cn/plugin?id=2588) + +**商品列表类** + +1. 云端一体列表/宫格视图互切：[https://ext.dcloud.net.cn/plugin?id=2651](https://ext.dcloud.net.cn/plugin?id=2651) +2. 云端一体列表（宫格模式）：[https://ext.dcloud.net.cn/plugin?id=2671](https://ext.dcloud.net.cn/plugin?id=2671) +3. 云端一体列表（列表模式）：[https://ext.dcloud.net.cn/plugin?id=2672](https://ext.dcloud.net.cn/plugin?id=2672) +