微信小程序官方提供的彈窗真的是太不友好了Ｕ仔啤烛谊！提示的內(nèi)容還最好不能超過三行风响，于是，參考著樣式丹禀，自己動(dòng)手?jǐn)]一個(gè)状勤！
一、創(chuàng)建組件
1.新建一個(gè)專門拿來放組件的目錄
命名為component
2.新建一個(gè)彈窗組件的目錄湃崩，在目錄下新建一個(gè)同名的Component
結(jié)構(gòu)跟普通頁面一樣
二荧降、編寫組件
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: '請確認(rèn)提交信息'
},
content: {
type: Array
},
confirmText: {
type: String,
value: '確定'
},
cancelText: {
type: String,
value: '取消'
}
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
showDialog: false
},
/**
* 組件的方法列表
*/
methods: {
show() {
this.setData({
showDialog: true
})
},
hide() {
this.setData({
showDialog: false
})
},
/*
* 內(nèi)部私有方法建議以下劃線開頭
* triggerEvent 用于觸發(fā)事件
*/
_cancel() {
//觸發(fā)取消回調(diào)
this.triggerEvent("cancel")
},
_confirm() {
//觸發(fā)成功回調(diào)
this.triggerEvent("confirm");
}
}
})
4.json
{
"component": true,
"usingComponents": {}
}
三接箫、在其他頁面上使用組件
1.在json中引入
{
"navigationBarTitleText": "記賬",
"usingComponents": {
"dialog": "/component/dialog/dialog"
}
}
2.wxml引入
<view>
<!--這里還有一個(gè)表單攒读，由于不是重點(diǎn)就不列出來了-->
<!--這個(gè)按鈕來觸發(fā)彈窗的打開-->
<button bindtap="handleSubmit" class="btn">新增資產(chǎn)項(xiàng)目</button>
<dialog id="dialog"
title="請確認(rèn)資產(chǎn)項(xiàng)目信息"
confirmText="確定"
cancelText="取消"
content="{{dialogContent}}"
bind:cancel="handleCancelDialog"
bind:confirm="handleConfirmDialog">
</dialog>
</view>
3.在js中引入
// 有省略一些表單的數(shù)據(jù)的操作
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
// 表單數(shù)據(jù)
assets: [],
assetIndex: 0,
isCostText: '支出',
date: '',
amount: null,
descripition: '',
// 用來放彈窗內(nèi)容的，里面的格式應(yīng)該為[{label: 'sadsa', value: 'dsadsad'}]
dialogContent: []
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
*/
onReady: function () {
// 獲得dialog組件
this.dialog = this.selectComponent("#dialog");
},
// 點(diǎn)擊了提交記錄按鈕
submitData(e) {
// 打開確認(rèn)框
const data = this.data
const dialogContent = [
{
label: '資產(chǎn)項(xiàng)目',
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
})
// 不定時(shí)也行的
setTimeout(() => {
// 打開彈窗
this.dialog.show()
}, 100)
},
// 點(diǎn)擊了彈出框的取消
handleCancelDialog() {
this.dialog.hide()
},
// 點(diǎn)擊了彈出框的確認(rèn)
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
}
// 這里一般都是與后臺(tái)交互過程
// 關(guān)閉loading
wx.hideLoading()
}
})
點(diǎn)擊提交記錄按鈕前
彈窗出現(xiàn)后
