微信小程序官方提供的弹窗真的是太不友好了！！提示的内容还最好不能超过三行，于是，参考着样式，自己动手撸一个！
一、创建组件
1.新建一个专门拿来放组件的目录
命名为component
2.新建一个弹窗组件的目录，在目录下新建一个同名的Component
结构跟普通页面一样
二、编写组件
1.wxml
<!--component/dialog/dialog.wxml-->
<view class="my-dialog" hidden="{{!showDialog}}">
<view class="my-mask"></view>
<view class="my-container">
<view class="title">{{title}}</view>
<view class="content">
<view class="row" wx:for="{{content}}" wx:for-index="index" wx:for-item="item" wx:key="index">{{item.label}}：{{item.value}}</view>
</view>
<view class="btn-row">
<view class="confirm" bindtap="_confirm">确定</view>
<view class="cancel" bindtap='_cancel'>取消</view>
</view>
</view>
</view>
2.wxss
/* component/dialog/dialog.wxss */
.my-dialog {
opacity: 1;
}
.my-dialog .my-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 1000;
}
.my-dialog .my-container {
position: fixed;
width: 80%;
max-width: 300px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #fff;
text-align: center;
border-radius: 3px;
overflow: hidden;
z-index: 5000;
}
.my-dialog .my-container .title {
display: inline-block;
width: 100%;
margin: 20rpx 0 0 0;
height: 50rpx;
line-height: 50rpx;
text-align: center;
font-weight: 400;
font-size: 18px;
color: #303133;
}
.my-dialog .my-container .content {
margin: 10rpx 0 20rpx;
display: inline-block;
width: 100%;
line-height: 50rpx;
text-align: left;
}
.my-dialog .my-container .content .row {
margin: 0 10%;
width: 80%;
font-size: 26rpx;
color: #606266;
word-break: break-all;
}
.my-dialog .my-container .btn-row {
padding: 10rpx 0 0;
display: inline-block;
width: 100%;
height: 68rpx;
line-height: 68rpx;
font-size: 18px;
border-top: 1rpx solid #c0c4cc;
}
.my-dialog .my-container .btn-row .confirm {
float: right;
width: 50%;
height: 100%;
color: #86c2ec;
}
.my-dialog .my-container .btn-row .cancel {
color: #606266;
float: right;
width: calc(50% - 2rpx);
height: 100%;
border-right: 1rpx solid #c0c4cc;
}
3.js
// component/dialog/dialog.js
Component({
/**
* 组件的属性列表
*/
properties: {
title: {
type: String,
// 初始值
value: '请确认提交信息'
},
content: {
type: Array
},
confirmText: {
type: String,
value: '确定'
},
cancelText: {
type: String,
value: '取消'
}
},
/**
* 组件的初始数据
*/
data: {
showDialog: false
},
/**
* 组件的方法列表
*/
methods: {
show() {
this.setData({
showDialog: true
})
},
hide() {
this.setData({
showDialog: false
})
},
/*
* 内部私有方法建议以下划线开头
* triggerEvent 用于触发事件
*/
_cancel() {
//触发取消回调
this.triggerEvent("cancel")
},
_confirm() {
//触发成功回调
this.triggerEvent("confirm");
}
}
})
4.json
{
"component": true,
"usingComponents": {}
}
三、在其他页面上使用组件
1.在json中引入
{
"navigationBarTitleText": "记账",
"usingComponents": {
"dialog": "/component/dialog/dialog"
}
}
2.wxml引入
<view>
<!--这里还有一个表单，由于不是重点就不列出来了-->
<!--这个按钮来触发弹窗的打开-->
<button bindtap="handleSubmit" class="btn">新增资产项目</button>
<dialog id="dialog"
title="请确认资产项目信息"
confirmText="确定"
cancelText="取消"
content="{{dialogContent}}"
bind:cancel="handleCancelDialog"
bind:confirm="handleConfirmDialog">
</dialog>
</view>
3.在js中引入
// 有省略一些表单的数据的操作
Page({
/**
* 页面的初始数据
*/
data: {
// 表单数据
assets: [],
assetIndex: 0,
isCostText: '支出',
date: '',
amount: null,
descripition: '',
// 用来放弹窗内容的，里面的格式应该为[{label: 'sadsa', value: 'dsadsad'}]
dialogContent: []
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
// 获得dialog组件
this.dialog = this.selectComponent("#dialog");
},
// 点击了提交记录按钮
submitData(e) {
// 打开确认框
const data = this.data
const dialogContent = [
{
label: '资产项目',
value: data.assets[form.assetIndex].assetName
},
{
label: '收入/支出',
value: data.isCostText
},
{
label: '交易日期',
value: data.date
},
{
label: '金额',
value: `${data.amount} 元`
},
{
label: '备注详情',
value: data.description
}
]
this.setData({
dialogContent: dialogContent
})
// 不定时也行的
setTimeout(() => {
// 打开弹窗
this.dialog.show()
}, 100)
},
// 点击了弹出框的取消
handleCancelDialog() {
this.dialog.hide()
},
// 点击了弹出框的确认
handleConfirmDialog() {
this.dialog.hide()
wx.showLoading({
title: '正在提交'
})
const form = this.data
const params = {
masterAssetId: this.data.assets[form.assetIndex].assetId,
amount: form.isCost ? -form.amount : form.amount,
description: form.description,
transactionTime: form.date
}
// 这里一般都是与后台交互过程
// 关闭loading
wx.hideLoading()
}
})
点击提交记录按钮前
弹窗出现后
