广州凡科互联网科技有限公司

营业时间
MON-SAT 9:00-18:00

全国服务热线
18720358503

公司门店地址
广州市海珠区工业大道北67号凤凰创意园

部件化开发设计,以一个自定控制模块框部件作为

日期:2021-02-23 浏览:

自定部件我将它分成简易的三个流程, 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/





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


网站知识

联系方式丨CONTACT

  • 全国热线:18720358503
  • 传真热线:18720358503
  • Q Q咨询:2639601583
  • 企业邮箱:2639601583@qq.com

首页
电话
短信
联系