技術標籤：元件小程式

效果：

app.json

"components/noFun/index",

noFun元件
onFun.View

<view class="box" wx:if="{{show==1}}">
  <view class="no-bag">
    <view class="no-msg">
      <view class="no-img">
        <image src="
 
../../images/tips.png"></image>
      </view>
      <view class="no-text">
        對不起，將盡快上線此功能，敬請期待！
      </view>
    </view>
  </view>
  <view class="exit">
    <image src="../../images/exit.png" bindtap="hide"></
 
image>
  </view>
</view>

onFun.CSS

.box{
  position: absolute;
    background-color: rgba(0,0,0,0.6);
    height: 100%;
    top: 0;
}
.no-bag{
  display: flex;
  justify-content: center;
  justify-content: center;
}
.no-msg{
  background: white;
  display: flex;
  width: 60%;
  padding: 5%;
  border-radius: 10rpx;
  height: 80rpx;
  margin-top: 30%;
}
.no-img{
  padding: 0 20rpx;
}
.no-img image{
  width: 40rpx;
  height: 40rpx;
}
.no-text{
  color: #333333;
}
.exit{
  margin-top: 50rpx;
  text-align: center;
}
.exit image{
  width: 40rpx;
  height: 40rpx;
}
 

onFun.JS

var app = getApp();
var util = require("../../utils/util.js");
Component({
  options: {
    multipleSlots: true // 在元件定義時的選項中啟用多slot支援
  },
  /**
   * 元件的屬性列表
   */
  properties: {
    show: {
      type: Number,
      value: 0
    },
  },

  /**
   * 元件的初始資料
   */
  data: {
  },

  /**
   * 元件的方法列表
   */
  methods: {
    hide: function () {
      this.setData({
        show:0
      })
    },
  }
})

元件呼叫
1、在需要的呼叫的頁面的JSON中新增

  "usingComponents": {
    "noFun": "../../../components/noFun/index"
  }

2、頁面呼叫並傳參

  <noFun show='{{show}}'></noFun>