小程序缺省页公共组件

<!--components/nodata/nodata.wxml-->
<!--其中的图片nodata.img从UI图获取-->
<view class="nodata" style="margin-top:{{marTop}}rpx;">
    <image src="/images/nodata.png" mode="aspectFill"></image>
    <view wx:if="{{showTxt1 == 'true'}}" class="txt">{{txt1}}</view>
    <view wx:if="{{showTxt2 == 'true'}}" class="txt">{{txt2}}</view>
</view>

/* components/nodata/nodata.wxss */
.nodata {
  text-align: center;
}
.nodata image {
  width: 312rpx;
  height: 270rpx;
  margin-bottom: 20rpx;
}
.nodata .txt {
  font-size: 24rpx;
  color: rgba(0,0,0,0.25);
  text-align: center;
}
// components/nodata/nodata.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    txt1: {
      type: String,
      value: ''
    },
    txt2: {
      type: String,
      value: ''
    },
    showTxt1:{
      type:String,
      value:'false'
    },
    showTxt2:{
      type:String,
      value:'false'
    },
    marTop:{
      type:String,
      value:''
    },
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

//nodata.json
{
  "component": true,
  "usingComponents": {}
}
posted @ 2022-11-07 17:11  SultanST  阅读(29)  评论(0编辑  收藏  举报