首页
我的博客
写文章
登录
注册
网站导航
互站首页
源码集市
服务市场
域名交易
网站交易
任务大厅
商家专区
互站社区
微信小程序开发:组件化开发,以一个自定义模块框组件当做示例(
原创
沐雪源码交易网
2018-10-26 15:07:02
评论(0)
阅读(463)
自定义组件我把它分为简单的三个步骤, 1.创建组件 --- 2.编写组件 --- 3.调用,使用组件. 第一步:创建组件 创建一个modal文件夹,里面包含 josn.wxml.wcss.js 四个文件,然后在josn里面添加 "component":true (作用是声明这一组文件为自定义组件) 第二步. 编写组件代码 在modal.wxml : ```html
提示
{{modalMsg}}
取消
确定
``` 在modal.wxss: ```html .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 ```html 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中进行引用说明, 这里是设置自定义组件的标签名和引用路径 ```html { "usingComponents": { "modal": "../modal/modal" } } ``` 然后在index.wxml调用组件 ```html
``` 在index.js绑定数据, ```html Page({ data: { is_modal_Hidden:false, is_modal_Msg:’我是一个自定义组件’ } }) ```
关注下面的标签,发现更多相似文章
本文TAG标签:
分享
QQ分享
微博分享
微信扫一扫
收藏
微信小程序开发
上一篇:如何让店铺轻松赚钱、持续盈利?实体店怎么才能从混战的泥潭中脱如何让店铺轻松赚钱、持续盈利?实体店怎么才能从混战的泥潭中脱
下一篇:网站运营者必备的意识如何让店铺轻松赚钱、持续盈利?实体店怎么才能从混战的泥潭中脱
您好,
请先
登录
!请文明评论,不得违反国家法律法规!
已有
0
条评论
沐雪源码交易网
关注
TA的店铺
44
文章
27134
人气
32
评论
2
粉丝
专注.net技术,专注沐雪微店SaaS系统
Ta的最新文章
一岁的瑞幸,在争议中狂奔
C# 产生真随机数(RNGCryptoServiceProv
win10远程桌面连接,要求的函数不受支持 解决方法
这个领域诞生了市值130亿美元的独角兽,国内刚刚起步,腾讯也
在东南亚,双11和双12哪个更受欢迎?
最近评论
港务梦幻科技
走过路过 决定还是错过
港务梦幻科技
走过路过 决定还是错过
港务梦幻科技
走过路过 决定还是错过
港务梦幻科技
走过路过 决定还是错过
港务梦幻科技
走过路过 决定还是错过
标签大全
小程序
(4)
网站建设公司
(3)
微信小程序
(3)
微信小程序开发
(3)
网站建设
(3)
网站
(2)
程序员
(2)
搜索引擎
(1)
区块链
(1)
电商
(1)
酒店小程序
(1)
新零售
(1)
小程序开源框架
(1)
手机网站搭建
(1)
ai
(1)
微信公众平台开发 沐雪微信多用户商城系统
(1)
产品
(1)
沐雪微信 saas 商城系统源码
(1)
python
(1)
沐雪微信 saas商城
(1)
阅读目录
已有 0 条评论