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>
相关推荐
低代码布道师1 小时前
少儿舞蹈小程序(7)打造您的“活”名片:动态展示机构实力
低代码·小程序
软工的小白3 小时前
uniapp开发前端静态视频界面+如何将本地视频转换成网络地址
uni-app·音视频
程序员陆通5 小时前
用 Cursor AI 快速开发你的第一个编程小程序
人工智能·小程序
鹧鸪云光伏与储能软件开发5 小时前
投资储能项目能赚多少钱?小程序帮你测算
运维·数据库·小程序·光伏·光伏设计软件·光伏设计
微三云-轩5 小时前
小程序:12亿用户的入口,企业数字化的先锋军
大数据·小程序·开源软件
低代码布道师5 小时前
少儿舞蹈小程序(8)校区信息后台搭建
低代码·小程序
2501_916008895 小时前
iOS 抓包工具有哪些?全面盘点主流工具与功能对比分析
android·ios·小程序·https·uni-app·iphone·webview
2501_915921435 小时前
iOS混淆工具实战 视频流媒体类 App 的版权与播放安全保护
android·ios·小程序·https·uni-app·iphone·webview
NewChapter °6 小时前
如何通过 Gitee API 上传文件到指定仓库
前端·vue.js·gitee·uni-app
SY_FC8 小时前
uniapp阿里云验证码使用
阿里云·uni-app·notepad++