最近一直在学习微信小程序,小程序自带的组件有限,自己开发一些组件应用与项目,下面是一个自定义模态框的案例
1.第一步,这个应该比较简单了,创建一个组件,新建文件夹命名为components,在components文件夹中创建文件(文件类型为component)
(1)新建文件夹命名为components
(2)在components文件夹中创建文件(文件类型为component)
(3)命名为modal,会生成以下目录
2.准备工作已经做好,下面直接上代码
modal.wxml文件:
<view hidden='{{!isShow}}'>
<view class="modal">
<view class='modal-content'>
<view class='modal-top'>
<view class='header'>{{modalTitle}}</view>
</view>
<view class='modal-body'>
<text> {{modalMsg}}</text>
</view>
<view class='modal-footer'>
<text class='cancle' catchtap='_cancelEvent'>取消</text>
<text class='sure' catchtap='_confirmEvent'>确定</text>
</view>
</view>
</view>
</view>
由于个人写代码的习惯,习惯初始化一些公共样式:app.wxss
page{
font-size: 28rpx;
}
view,text,image,button,input,label,radio,picker,picker-view,slider,form,checkbox,swiper,button{
box-sizing: border-box;
font-family: "微软雅黑",Helvetica,Arial,sans-serif;
}
modal.wxss文件
/* components/modal.wxss */
.modal{
width:100%;
height: 100%;
background: rgba(0,0,0,0.5);
position: fixed;
top: 0;
left:0;
}
.modal-content{
width: 80%;
margin-left: 10%;
margin-top:200rpx;
min-height: 300rpx;
background: #fff;
position: relative;
}
.modal-top{
padding: 20rpx;
background: #f2f2f2;
}
.modal-body{
padding:20rpx;
}
.modal-footer{
padding: 20rpx;
border-top: 1px solid #f2f2f2;
position: absolute;
bottom: 0;
left:0;
width: 100%;
display: flex;
justify-content: flex-end;
}
.cancle{
width: 100rpx;height: 50rpx;
line-height: 50rpx;
border: 1px solid #f2f2f2;
text-align: center;
margin-right: 20rpx;
border-radius: 6rpx;
}
.sure{
width: 100rpx;height: 50rpx;
line-height: 50rpx;
text-align: center;
border-radius: 6rpx;
background: #f2f2f2;
}
// components/modal.js
Component({
/**
* 组件的属性列表
*/
properties: {
modalHidden:{
type:Boolean,
value:true
},
modalMsg: {
type: String,
value: ' ',
},
modalTitle: {
type: String,
value: ' ',
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
//隐藏弹框
hideModal() {
this.setData({
isShow: !this.data.isShow
})
},
//展示弹框
showModal() {
this.setData({
isShow: !this.data.isShow
})
},
_cancelEvent() {
//触发取消回调
this.triggerEvent("cancelEvent")
},
_confirmEvent() {
//触发成功回调
this.triggerEvent("confirmEvent");
}
}
})
3.组件已经建立好,下面就是调用了
(1)在调用页面index.json文件中加入以下代码,声明调用哪个组件,即提供每个自定义组件的标签名和对应的自定义组件文件路径:
{
"usingComponents": {
"modal": "/components/modal"
}
}
(2)index.wxml文件
<!-- 引用组件的页面模版 -->
<button bindtap="showDialog">点击显示</button>
<modal id='modal'
modalTitle='这里是标题'
modalMsg='我是内容'
bind:cancelEvent="_cancelEvent"
bind:confirmEvent="_confirmEvent">
</modal>
(3)index.js
const app = getApp()
Page({
data: {
},
onReady: function () {
//获得modal组件
this.modal= this.selectComponent("#modal");
},
showDialog() {
this.modal.showModal();
},
_cancelEvent() {
console.log('你点击了取消');
this.modal.hideModal();
},
//确认事件
_confirmEvent() {
console.log('你点击了确定');
this.modal.hideModal();
}
})
一个简单的自定义组件已经做好了
初学小程序,如有错误请指出