微信小程序 自定义组件(modal) 引入组件
2023-09-11 14:15:30 时间
项目结构:
步骤一:创建组件
声明这一组文件为自定义组件
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" } }
然后在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:'我是一个自定义组件' } })
步骤四:效果图
相关文章
- 微信小程序 - 沉浸式抽屉(非组件)
- 微信小程序 - radio/checkbox自定义组件
- 微信小程序 - 下拉菜单组件
- 【微信小程序】-- 自定义组件 -- 创建与引用 &样式(三十二)
- 微信小程序端在函数组件中使用 mobx 注入 store 失败
- vue2.0 自定义 下拉刷新和上拉加载更多(Scroller) 组件
- 微信小程序父子组件之间传值
- 微信小程序组件化开发框架WePY
- 微信小程序组件 下拉刷新
- 微信 小程序组件 加入购物车 (终极 上线版)
- 微信 小程序组件 分页菜单带下划线焦点切换
- 微信开源组件WCDB漫谈及Demo
- 【小程序】微信小程序自定义组件Component详细总结
- 微信小程序原生开发功能合集十:分步组件的封装
- 微信小程序原生开发功能合集六:富文本组件的封装
- 微信小程序开发之picker选择器组件用法
- 浅析微信小程序组件所在页面的生命周期、uni-app如何使用小程序组件pageLifetimes的生命周期函数及onHide/onUnload不触发的原因
- 微信移动端数据库组件 WCDB 系列(三) — 解析 WINQ 原理