uniapp uview Empty nodata默认提供的图片已经够用了，但是每次都需要手动输入以及调节上下间距比较麻烦，所以二次封装一下。节省一下工作量。

组件代码

<template>
	<div class="empty" :style="'height:'+height+'rpx'" v-if="!loading && list.length==0">
		<u-empty :mode="mode" :icon="'http://cdn.uviewui.com/uview/empty/'+ mode +'.png'" :text="text">
		</u-empty>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				show: false
			}
		},
		props: {
			height: {
				type: String,
				default () {
					return 600;
				}
			},
			mode: {
				type: String,
				default () {
					return 'data';
				}
			},
			loading: {
				type: Boolean,
				default () {
					return 'data';
				}
			},
			list: {
				type: Array,
				default () {
					return [];
				}
			},
			text: {
				type: String,
				default () {
					return '暂无内容';
				}
			}
		},
		methods: {}
	}
</script>
<style scoped lang="scss">
	.empty {
		height: 600rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
	}
</style>

使用

<nodata :height="280" text="暂无数据" mode="list" :loading='loading' :list="list"></nodata>

组件图片

car 购物车为空

page 页面不存在

search 没有搜索结果

address 没有收货地址

wifi 没有WiFi

order 订单为空

coupon 没有优惠券

permission 无权限

history 无历史记录

news 无新闻列表

message 消息列表为空

list 列表为空(通用)

data 数据为空(默认，通用)