小程式引入自定義元件
阿新 • • 發佈:2019-01-22
//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"
}
}