先导入uni-ui
然后使用uni-list组件
<template>
<unicloud-db v-slot:default="{data, loading, error, options}" collection="contacts">
<view v-if="error">{{error.message}}</view>
<view v-else>
<uni-list>
<uni-list-item v-for="item in data" :key="item._id" :title="item.name" :note="item.phone" link></uni-list-item>
</uni-list>
</view>
</unicloud-db>
</template>
最终效果
- 1-uni-list通讯录效果.png