E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

在实际项目开发中,封装一个空白页组件,当页面没数据的时候,可以显示空白页,并且可以根据调用组件传的值不一样,图片,文字和按钮文字页不一样,代码就直接粘贴啦首先要明白: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}},} 好啦,一个通用的空白页面组件就完成了,下面是效果图     微信小程序

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序封装空白页组件
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏