我们要实现如下图功能
小程序一个公共的弹出组件，首先我们创建一个pop文件
然后在生成的pop.json文件中将component定义为true
{
"component": true
}为pop.wxml添加内容
<!--pages/common/pop/pop.wxml-->
<view class='wx_dialog' hidden="{{!isShow}}">
<view class='wx-mask'></view>
<view class='wx-dialog-content'>
<view class='wx-dialog-title'>{{ title }}</view>
<view class='wx-dialog-contents'>{{ content }}</view>
<view class='wx-dialog-footer'>
<view class='wx-dialog-btn' catchtap='_cancelEvent'>{{ cancelText }}</view>
<view class='wx-dialog-btn' catchtap='_confirmEvent'>{{ confirmText }}</view>
</view>
</view>
</view>
pop.wxss
/* pages/common/pop/pop.wxss */
.wx_dialog {
position: fixed;
left: ;
right: ;
top: ;
bottom: ;
}
.wx-mask {
position: absolute;
left: ;
right: ;
top: ;
bottom: ;
background: rgba(, , , .);
z-index: ;
}
.wx-dialog-content {
position: absolute;
background: #fff;
left: %;
top: %;
transform: translate(-%, -%);
width: %;
/* height: 200px; */
padding-bottom: 60px;
z-index: ;
border-radius: 5px;
}
.wx-dialog-contents {
padding: 10px;
}
.wx-dialog-title {
padding: 5px 10px;
font-size: 14px;
}
.wx-dialog-footer {
position: absolute;
left: ;
right: ;
bottom: ;
font-size: 14px;
height: 40px;
line-height: 40px;
border-top: 1px solid #eee;
}
.wx-dialog-btn {
display: inline-block;
width: %;
cursor: pointer;
text-align: center;
}
.wx-dialog-btn:first-child {
border-right: 1px solid #eee;
}
pop.js
// pages/common/pop/pop.js
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
/**
* 组件的属性列表
* 用于组件自定义设置
*/
properties: {
// 弹窗标题
title: { // 属性名
type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
value: '标题' // 属性初始值（可选），如果未指定则会根据类型选择一个
},
// 弹窗内容
content: { type: String, value: '弹窗内容' },
// 弹窗取消按钮文字
cancelText: { type: String, value: '取消' },
// 弹窗确认按钮文字
confirmText: { type: String, value: '确定' }
},
/**
* 私有数据,组件的初始数据
* 可用于模版渲染
*/
data: { // 弹窗显示控制
isShow: false
},
/**
* 组件的方法列表
* 更新属性和数据的方法与更新页面数据的方法类似
*/
methods: {
/**
* 公有方法
*/
//隐藏弹框
hideDialog() {
this.setData({
isShow: !this.data.isShow
})
},
//展示弹框
showDialog() {
this.setData({
isShow: !this.data.isShow
})
},
/**
* 内部私有方法建议以下划线开头
* triggerEvent 用于触发事件
*/
_cancelEvent() { //触发取消回调
this.triggerEvent("cancelEvent")
},
_confirmEvent() { //触发成功回调
this.triggerEvent("confirmEvent");
}
}
})
在父级页面的.js文件中添加
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
this.dialog = this.selectComponent("#dialog");
},
showDialog() {
this.dialog.showDialog();
},
//取消事件
_cancelEvent() {
console.log('你点击了取消');
this.dialog.hideDialog();
},
//确认事件
_confirmEvent() {
console.log('你点击了确定');
this.dialog.hideDialog();
},
父级页面的.json文件中添加
{
"usingComponents": {"pop": "../common/pop/pop"}
}在父级页面的.wxml文件中添加
<view class="pop">
<pop id='dialog' title='我是标题' content='恭喜你，学会了小程序组件' cancelText='知道了' confirm='谢谢你' bind:cancelEvent="_cancelEvent" bind:confirmEvent="_confirmEvent">
</pop>
</view>
然后就大功告成了
如果想注册到全局，则需要在app.json页面添加挂载：
{
"usingComponents": {"pop": "../common/pop/pop"}
}