1. 程式人生 > >小程式引入自定義元件

小程式引入自定義元件

//WXML
<!-- 廣告訊息 -->
<i-notice-bar icon="systemprompt" loop>
  2018年世界盃,將於6月14日至7月15日舉行;2018年世界盃,將於6月14日至7月15日舉行;
</i-notice-bar>
<!-- list -->
<i-cell-group>
  <i-cell title="list" is-link></i-cell>
  <i-cell title="list" is-link></i-cell>
  <i-cell title="開關">
    <switch slot="footer" bindchange='btn' />
  </i-cell>
</i-cell-group>
<!-- 提示 -->

<i-button display="none" type="ghost" bind:click="handleDuration">兩秒提示消失</i-button>

<i-message id="message" />
//JS
var app = new getApp();
const {
  $Message
} = require('../../dist/base/index');
Page({
  handleDuration() {
    $Message({
      content: '我將在 2 秒後消失',
      duration: 2
    });
  },
  // switch開關
  btn: function(res) {
    var that = this;
    if (res.detail.value) {
      console.log("開啟");
      that.setData({
        show: "block"
      })

    } else {
      console.log("關閉");
      that.setData({
        show: "none"
      })
    }
  },
  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function(options) {

  },

  /**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function() {

  },

  /**
   * 生命週期函式--監聽頁面隱藏
   */
  onHide: function() {

  },

  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function() {

  },

  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function() {

  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function() {

  }
})
//JSON
{
  "usingComponents": {
    "i-notice-bar": "../../dist/notice-bar/index",
    "i-cell-group": "../../dist/cell-group/index",
    "i-cell": "../../dist/cell/index",
    "i-button": "../../dist/button/index",
    "i-message": "../../dist/message/index"
  }
}