微信小程序 - 空数据、网络加载失败组件

GitHub Demo 地址: jh-weapp-demo 实现一些常用效果、封装通用组件和工具类

小程序码

效果图：

##使用说明


1. usingComponents 添加"EmptyView": "./components/empty-view/index",2. wxml 添加组件//不带按钮
<EmptyView wx:if="true"></EmptyView>
<EmptyView wx:if="true" info="暂无数据2"></EmptyView>//带按钮 1
<EmptyView wx:if="true"
emptyType="1"
bind:ClickEmptyBtn="ClickEmptyBtn">
</EmptyView>
//带按钮 2
<EmptyView wx:if="true"
emptyType="1"
info="暂无数据2"
btnTitle="按钮文字"
bind:ClickEmptyBtn="ClickEmptyBtn">
</EmptyView>3. 点击事件ClickEmptyBtn:function(e){console.log("点击 点击重新加载按钮");},

js 代码：

/*空数据展示 , 暂无数据 和网络加载失败两种
*//*
使用方法 ：1. usingComponents 添加"EmptyView": "./components/empty-view/index",2. wxml 添加组件//不带按钮
<EmptyView wx:if="true"></EmptyView>
<EmptyView wx:if="true" info="暂无数据2"></EmptyView>//带按钮 1
<EmptyView wx:if="true"
emptyType="1"
bind:ClickEmptyBtn="ClickEmptyBtn">
</EmptyView>
//带按钮 2
<EmptyView wx:if="true"
emptyType="1"
info="暂无数据2"
btnTitle="按钮文字"
bind:ClickEmptyBtn="ClickEmptyBtn">
</EmptyView>3. 点击事件ClickEmptyBtn:function(e){console.log("点击 点击重新加载按钮");},*/Component({options: {multipleSlots: true // 在组件定义时的选项中启用多slot支持},/*** 组件的属性列表*/properties: {//  0 暂无数据; 1 网络请求错误;emptyType: {// 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）type: Number,value: 0},verticalTop: {type: String,value: "200rpx"},emptyImage: { // 属性名type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）value: "./ic_empty.png" // 属性初始值（可选），如果未指定则会根据类型选择一个},info: {type: String,value: "暂无数据"},btnTitle: {type: String,value: "点击重试"},},lifetimes: {attached: function () {if (this.properties.emptyType == 0) {this.setData({info: this.properties.info == '暂无数据' ? '暂无数据' : this.properties.info,emptyImage: './ic_empty.png',showBtn: false,})}if (this.properties.emptyType == 1) {console.log(this.properties.info);this.setData({info: this.properties.info == '暂无数据' ? '网络不给力，点击加载重试' : this.properties.info,emptyImage: './ic_netErr.png',showBtn: true,})}}},/*** 组件的方法列表*/methods: {ClickBtn() {this.triggerEvent('ClickEmptyBtn');}}
})

json 代码：

{"component": true,"usingComponents": {}
}

wxml 代码：

<view class="empty-content" style="margin-top:{{verticalTop}}"><image class="image" src='{{emptyImage}}' mode="widthFix"></image><view wx:if="{{info.length}}" class="info"> {{info}}</view><view wx:if="{{emptyType==1}}" class="empty-btn" catchtap="ClickBtn">{{btnTitle}}</view>
</view>

wxss 代码：

.empty-content {width: 100vw;height: 100vh;display: flex;flex-direction: column;align-items: center;
}
.image{width: 180rpx;height: 180rpx;
}.info {font-size: 32rpx;color: #B1BBC3;margin-top: 40rpx;
}
.empty-btn {margin-top: 30rpx;font-size: 34rpx;width: 80%;/* width: 42.67%; */text-align: center;height: 80rpx;line-height: 80rpx;background: #38BC9D;color: #ffffff;border-radius: 40rpx;
}

微信小程序 - 空数据、网络加载失败组件相关推荐

微信小程序报错图片加载失败渲染层网络层错误Failed to load image
这个错误找了很久,原来是这样的: <u-image v-if="baseListItem.img.length>0" :src="baseListItem.i ...
微信小程序开发动感十足的加载动画--都在这里！
微信小程序开发动感十足的加载动画--都在这里.jpg 1. 概述我们在学习微信小程序时,应该会遇到载入图片或者动画需要等待的情况,那么这个等待的画面我们应该怎么编写呢?今天我们就分享这样的小教程. ...
微信小程序scroll-view上拉加载更多
微信小程序scroll-view上拉加载更多 1.wxml代码 <scroll-view class="scroll-view-container" scroll-ybind ...
微信小程序中使用wxss加载图片并实现动画
微信小程序中使用wxss加载图片并实现动画记录微信小程序中使用wxss加载图片并实现动画的方式,最终实现loading效果. 代码 .weui-loading { margin: 0 5px; wi ...
【微信技术-微信小程序】------- 骨架屏(加载流)配置(skeleton-config)及属性详解 (第三篇)
本篇文章是骨架屏(skeleton)配置及属性详解(第三篇) 第一篇文章:[微信技术-微信小程序]-------骨架屏(加载流) 简单入门(第一篇) 第二篇文章:[微信技术-微信小程序]------- ...
微信小程序image图无法加载出来的解决办法（亲测有效）
在微信小程序中,第一次加载页面时图片(线上图)加载不出来/图片灰色背景显示,这个时候该如何解决这个问题呢?请带着问题查看这篇博客,希望对您有所帮助(点赞skr) 看官方文档? 自行解决? 写在前面(初 ...
微信小程序-首屏视频加载
项目场景: 微信小程序开发: 实现小程序首页视频预加载功能 1.获取设备的宽和高度 2.小程序video的使用获取设备的宽和高度 // 获取设备的宽和高度getsize() {let that = ...
微信小程序下拉刷新列表onPullDownRefresh；微信小程序上划加载列表onReachBottom；uni-app微信小程序下拉加载数据；uni-app微信小程序上划页面加载数据
需求:微信小程序列表加载有两种方式,分别是按住页面下拉加载数据数据(触发onPullDownRefresh)和直接上划滚动页面到底部加载数据(触发onReachBottom函数). 本文主要是使用上划 ...
微信小程序实现上拉加载更多数据（分页加载）
前言: 该实例和我其他两篇文章息息相关,不清楚的可以先做功课 Vant Weapp小程序 UI 组件库 https://blog.csdn.net/qq_36303853/article/detail ...

微信小程序 - 空数据、网络加载失败组件

GitHub Demo 地址: `jh-weapp-demo` 实现一些常用效果、封装通用组件和工具类

小程序码

效果图：

js 代码：

json 代码：

wxml 代码：

wxss 代码：

微信小程序 - 空数据、网络加载失败组件相关推荐

最新文章

热门文章

微信小程序 - 空数据、网络加载失败 组件

GitHub Demo 地址: jh-weapp-demo 实现一些常用效果、封装通用组件和工具类

小程序码

效果图：

js 代码：

json 代码：

wxml 代码：

wxss 代码：

微信小程序 - 空数据、网络加载失败 组件相关推荐

最新文章

热门文章

微信小程序 - 空数据、网络加载失败组件

GitHub Demo 地址: `jh-weapp-demo` 实现一些常用效果、封装通用组件和工具类

微信小程序 - 空数据、网络加载失败组件相关推荐