碼迷,mamicode.com
首頁 > 微信 > 詳細

微信小程序 自定義組件 引入組件

時間:2018-01-23 13:14:58      閱讀:7680      評論:0      收藏:0      [點我收藏+]

標簽:簽名   bin   lock   路徑   over   order   highlight   val   微信小程序   

項目結構:

技術分享圖片

步驟一:創建組件

聲明這一組文件為自定義組件

modal.json

{
  "component": true, // 自定義組件聲明
  "usingComponents": {} // 可選項,用于引用別的組件
}

步驟二:編寫組件代碼

1.邏輯層

modal.js

Component({
  properties: {
    modalHidden: {
      type: Boolean,
      value: true
    }, //這里定義了modalHidden屬性,屬性值可以在組件使用時指定.寫法為modal-hidden  
    modalMsg: {
      type: String,
      value: ‘ ‘,
    }
  },
  data: {
    // 這里是一些組件內部數據  
    text: "text",
  },
  methods: {
    // 這里放置自定義方法  
    modal_click_Hidden: function () {
      this.setData({
        modalHidden: true,
      })
    },
    // 確定  
    Sure: function () {
      console.log(this.data.text)
    }
  }
})

2.頁面布局

modal.wxml

<view hidden=‘{{modalHidden}}‘>  
  <view class=‘mask_layer‘ bindtap=‘modal_click_Hidden‘ />  
  <view class=‘modal_box‘>  
    <view class="title">提示</view>  
    <view class=‘content‘>  
      <text class=‘modalMsg‘>{{modalMsg}}</text>  
    </view>  
    <view class=‘btn‘>  
      <view bindtap=‘modal_click_Hidden‘ class=‘cancel‘>取消</view>  
      <view bindtap=‘Sure‘ class=‘Sure‘>確定</view>  
    </view>  
  </view>  
</view>

3.樣式

modal.wxss

.mask_layer {  
  width: 100%;  
  height: 100%;  
  position: fixed;  
  z-index: 1000;  
  background: #000;  
  opacity: 0.5;  
  overflow: hidden;  
}  
.modal_box {  
  width: 76%;  
  overflow: hidden;  
  position: fixed;  
  top: 50%;  
  left: 0;  
  z-index: 1001;  
  background: #fafafa;  
  margin: -150px 12% 0 12%;  
  border-radius: 3px;  
}  
  
.title {  
  padding: 15px;  
  text-align: center;  
  background-color: gazure;  
}  
  
.content {  
  overflow-y: scroll; /*超出父盒子高度可滾動*/  
}  
  
.btn {  
  width: 100%;  
  margin-top: 65rpx;  
  display: flex;  
  flex-direction: row;  
  align-items: center;  
  justify-content: space-between;  
  box-sizing: border-box;  
  background-color: white;  
}  
  
.cancel {  
  width: 100%;  
  padding: 10px;  
  text-align: center;  
  color: red;  
}  
  
.Sure {  
  width: 100%;  
  padding: 10px;  
  background-color: gainsboro;  
  text-align: center;  
}  
  
.modalMsg {  
  text-align: center;  
  margin-top: 45rpx;  
  display: block;  
}

步驟三:使用組件

這里我是在 pages/index/index 頁面調用 pages/modal/modal 自定義組件

首先在index.json中進行引用說明, 這里是設置自定義組件的標簽名和引用路徑

{
  "usingComponents": {
    "modal": "../../component/modal/modal"
  }
}

步驟四:效果圖

微信小程序 自定義組件 引入組件

標簽:簽名   bin   lock   路徑   over   order   highlight   val   微信小程序   

原文地址:https://www.cnblogs.com/crazycode2/p/8334925.html

(1)
(1)
   
舉報
評論 一句話評論(0
0條  
登錄后才能評論!
? 2014 mamicode.com 版權所有 京ICP備13008772號-2
迷上了代碼!
25选5历史开奖结果百度