自定部件我将它分成简易的三个流程, 1.建立部件 --- 2.撰写部件  ---   3.启用,应用部件. 

第一步:建立部件

建立一个modal文档夹,里边包括 josn.wxml.wcss.js 四个文档,随后在josn里边加上  component :true (功效是申明这一组文档为自定部件)

第二步. 撰写部件编码

在modal.wxml :

 view hidden= {{modalHidden}} 
  view  >
在modal.wxss:
.mask_layer {
 width: 100%;
 height: 100%;
 position: fixed;
 z-index: 1000;
left:0;top:0;
 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
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中开展引入表明, 这儿是设定自定部件的标识名和引入相对路径
{
  usingComponents : {
  modal :  ../modal/modal 
 }
}

随后在index.wxml启用部件
 !-- 启用modal部件 -- 
 modal modal-hidden= {{is_modal_Hidden}}  modal-msg= {{is_modal_Msg}} / 
在index.js关联数据信息,
Page({
 data: {
 is_modal_Hidden:false,
 is_modal_Msg: 我是一个自定部件 
 }
})
实际效果图:


 
假如必须查询更为详尽的文本文档,能够在官方网文本文档查询, 详细地址为:  debug/wxadoc/dev/ponent/


 

 

 

 迅速建网站
 网站制作
 企业网站建设
 微信小程序开发设计
 常州市企业网站建设
 常州市商城系统构建

              
              

                
上一篇：上海市微信小程序订制开发设计 
                
下一篇：没有了