自定義組件化開發(附完整示例代碼和效果圖)
發表時間：2022-9-6
發布人：葵宇科技
瀏覽次數：13
自定義組件我把它分為簡單的三個步驟, 1.創建組件 --- 2.編寫組件 --- 3.調用,使用組件.
第一步:創建組件 創建一個modal文件夾,里面包含 josn.wxml.wcss.js 四個文件,然后在josn里面添加 "component":true (作用是聲明這一組文件為自定義組件)
第二步. 編寫組件代碼
在modal.wxml :
[html] view plain copy
<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>在modal.wxss:
[css] view plain copy
.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;
}在modal.js
[javascript] view plain copy
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)
}
}
})第三步, 使用組件
這里我是在 pages/index/index 頁面調用 pages/modal/modal 自定義組件 首先在index.json中進行引用說明, 這里是設置自定義組件的標簽名和引用路徑
[javascript] view plain copy
{
"usingComponents": {
"modal": "../modal/modal"
}
}
然后在index.wxml調用組件
[html] view plain copy
<!-- 調用modal組件 -->
<modal modal-hidden="{{is_modal_Hidden}}" modal-msg="{{is_modal_Msg}}"/>在index.js綁定數據,
[javascript] view plain copy
Page({
data: {
is_modal_Hidden:false,
is_modal_Msg:'我是一個自定義組件'
}
})效果圖:
如果需要查看更加詳細的文檔,可以在官方文檔查看, 地址為:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/custom-component/
