微信小程序封装空白页组件

在实际项目开发中，封装一个空白页组件，当页面没数据的时候，可以显示空白页，并且可以根据调用组件传的值不一样，图片，文字和按钮文字页不一样，代码就直接粘贴啦

首先要明白：

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

}

},

}

 

好啦，一个通用的空白页面组件就完成了，下面是效果图