p6-uniCloud实战通讯录-美化界面

先导入uni-ui

• ext.dcloud.net.cn/plugin?id=5…

然后使用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