uniapp 微信小程序 数据空白展示组件

效果图

html

javascript 复制代码
<template>
	<view class="nodata">
		<view class="">
			<image class="nodataimg"
				:src="$publicfun.locaAndHttp()?localUrl:$publicfun.httpUrlImg(httUrl)"
				mode="aspectFit"></image>
			<view class="tips">
				{{tips}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "nodata",
		data() {
			return {

			};
		},
		props: {
			tips: {
				default: '暂无数据~',
				type: String
			},
			localUrl: {
				default: '',
				type: String
			},
			httUrl: {
				default: '',
				type: String
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nodata {
		width: 100%;
		height: 500rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;

		.nodataimg {
			width: 160px;
			height: 120px;
		}

		.tips {
			width: 100%;
			text-align: center;
			color: #999;
			font-size: 26rpx;
			margin-top: 20rpx;
		}
	}
</style>

关于

定义的全局方法

$publicfun.locaAndHttp() 判断是不是网络路径

localUrl 本地路径

$publicfun.httpUrlImg(httUrl) 网路路径

图片

需求图片

使用

javascript 复制代码
<nodata v-if="orderlist.length==0" :tips="'暂无订单'" :localUrl="'../../static/all/order-empty.png'"
					:httUrl="'order-empty.png'"></nodata>
相关推荐
paopaokaka_luck1 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
前端程序猿-秦祥1 小时前
uniapp拦截返回事件
uni-app
雪芽蓝域zzs5 小时前
uniapp input 如何只读禁用输入可点击
uni-app
老虎06277 小时前
JavaWeb(苍穹外卖)--学习笔记13(微信小程序开发,缓存菜品,Spring Cache)
笔记·学习·微信小程序
xw57 小时前
uni-app项目跑APP报useStore报错
前端·uni-app
!win !7 小时前
uni-app项目跑APP报useStore报错
前端·uni-app
郭邯12 小时前
小程序中自定义组件的样式隔离
微信小程序
iOS阿玮13 小时前
为什么独立开发者都在AppStore而不去安卓市场?
uni-app·app·apple
每天开心14 小时前
噜噜旅游App(4)——构建旅游智能客服模块,实现AI聊天
前端·微信小程序·前端框架
xiaohe060118 小时前
🪀 Uni ECharts:也许是 uni-app 中使用 ECharts 最优雅的解决方案
uni-app