更新记录

1.0.4（2019-11-12）

• 优化 可在nvue页面中使用

1.0.1（2019-09-21）

• 新增 示例项目

List 列表

已经支持在nvue页面中使用

列表组件，组件名：uni-list、uni-list-item，代码块： uList。

使用方式

在 script 中引用组件

import uniList from "@/components/uni-list/uni-list.vue"
import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
export default {
    components: {uniList,uniListItem}
}

在 template 中使用组件

<!-- 一般用法 -->
<uni-list>
    <uni-list-item title="标题文字" :show-arrow="false"></uni-list-item>
    <uni-list-item title="标题文字"></uni-list-item>
    <uni-list-item title="标题文字" :show-badge="true" badge-text="12"></uni-list-item>
    <uni-list-item title="禁用状态" :disabled="true" :show-badge="true" badge-text="12"></uni-list-item>
</uni-list>

<!-- 带描述信息 -->
<uni-list>
    <uni-list-item title="标题文字" note="描述信息"></uni-list-item>
    <uni-list-item title="标题文字" note="描述信息" :show-badge="true" badge-text="12"></uni-list-item>
</uni-list>

<!-- 包含图片 -->
<uni-list>
    <uni-list-item title="标题文字" thumb="https://img-cdn-qiniu.dcloud.net.cn/new-page/hx.png"></uni-list-item>
</uni-list>

<!-- 包含图标 -->
<uni-list>
    <uni-list-item title="标题文字" :show-extra-icon="true" :extra-icon="{color: '#4cd964',size: '22',type: 'spinner'}"></uni-list-item>
</uni-list>

<!-- 显示Switch -->
<uni-list>
    <uni-list-item title="标题文字" :show-switch="true" :show-arrow="false"></uni-list-item>
</uni-list>

属性说明

uniListItem 属性说明：

uniListItem 事件说明：

Tips

• 支付宝小程序平台需要在支付宝小程序开发者工具里开启 component2 编译模式，开启方式： 详情 --> 项目配置 --> 启用 component2 编译
• 页面纵向滚动时，Android 平台不支持区域滚动，iOS 支持
• iOS 有Bounce效果，Android 仅可滚动时有

插件预览地址

https://uniapp.dcloud.io/h5/pages/extUI/list/list