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>
相关推荐
2501_916008895 分钟前
iOS 26 软件性能测试全流程,启动渲染资源压力对比与优化策略
android·macos·ios·小程序·uni-app·cocoa·iphone
00后程序员张39 分钟前
iOS 26 兼容测试实战,机型兼容、SwiftUI 兼容性改动
android·ios·小程序·uni-app·swiftui·cocoa·iphone
OEC小胖胖1 小时前
连接世界:网络请求 `wx.request`
前端·微信小程序·小程序·微信开放平台
mon_star°1 小时前
基于微信小程序高仿背单词消除游戏
游戏·微信小程序·小程序
jingling5551 小时前
解决微信小程序真机调试中访问本地接口 localhost:8080 报错
前端·微信小程序·小程序
ZeroNews内网穿透1 小时前
新版发布!“零讯”微信小程序版本更新
运维·服务器·网络·python·安全·微信小程序·小程序
molong9311 小时前
Android 应用配置跳转微信小程序
android·微信小程序·小程序
尘似鹤1 小时前
微信小程序学习(二)
学习·微信小程序·小程序
杏花春雨江南1 小时前
微信小程序里 uni.navigateTo 用的多了, 容易报错,
微信小程序·小程序·notepad++
2501_915106322 小时前
iOS 可分发是已经上架了吗?深入解析应用分发状态、ipa 文件上传、TestFlight 测试与 App Store 审核流程
android·ios·小程序·https·uni-app·iphone·webview