微信小程序封装空白页组件
在实际项目开发中,封装一个空白页组件,当页面没数据的时候,可以显示空白页,并且可以根据调用组件传的值不一样,图片,文字和按钮文字页不一样,代码就直接粘贴啦
首先要明白:
Component构造器
Component构造器可用于定义组件,调用Component构造器时可以指定组件的属性、数据、方法等。(这个不懂的,可以去微信公众平台-框架-自定义组件)中去了解概念
WXML:
<view class="empty-content">
<image src='{{emptyImage}}' mode="widthFix" />
<view wx:if="{{showInfo}}" class="info text-lg text-default">{{info}}</view>
<view wx:if="{{showButton}}" class="empty-btn">
{{buttonTitle}}
</view>
</view>
WXSS:
.empty-content {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}
.empty-content image{
width: 56.5%;
margin-top: 242rpx;
}
.empty-content .info {
font-size: 32rpx;
color: #B1BBC3;
margin: 0 0 36rpx;
}
.empty-content .empty-btn {
font-size: 34rpx;
width: 42.67%;
text-align: center;
height: 80rpx;
line-height: 80rpx;
background: #3CA0FF;
color: #ffffff;
border-radius: 50rpx;
}
JSON:
"component": true,
JS:
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
/**
* 组件的属性列表
*/
properties: {
emptyImage: { // 属性名
type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
value: "/base/assets/empty.png" // 属性初始值(可选),如果未指定则会根据类型选择一个
},
info: {
type: String,
value: "空空如也~"
},
showInfo: {
type: Boolean,
value: true
},
buttonTitle: {
type: String,
value: "点击重试"
},
showButton: {
type: Boolean,
value: true
}
},
}
好啦,一个通用的空白页面组件就完成了,下面是效果图