支付寶小程式彈窗元件|alert警告框|弱提示Toast

支付寶 · 發表 2018-12-01 07:11:36

摘要：支付寶小程式彈窗|自定義alert彈窗|model對話方塊|actionSheet選項支付寶小程式官方提供的互動反饋彈窗如：提示框alert、確認框confirm及prompt、toast弱提示等外掛功能比較有限，很多想要的效果都達不到。如是就自己開發了個支付寶小程式自定義彈窗元...

支付寶小程式彈窗|自定義alert彈窗|model對話方塊|actionSheet選項

支付寶小程式官方提供的互動反饋彈窗如：提示框alert、確認框confirm及prompt、toast弱提示等外掛功能比較有限，很多想要的效果都達不到。

如是就自己開發了個支付寶小程式自定義彈窗元件，多種簡潔優雅的程式碼。

// 引入外掛js
import {wcPop} from '../../utils/component/wcPop/tpl.js';

Page({

/**
* 頁面的初始資料
*/
data: {

},

onLoad(query) {
// 頁面載入
console.info(`Page onLoad with query: ${JSON.stringify(query)}`);
},


/**
* --------- 支付寶小程式彈窗演示函式.Start ---------
*/
//msg提示
btnTap01: function(e) {
wcPop({
anim: 'fadeIn',
content: 'msg提示框測試（5s後窗口關閉）',
shade: true,
shadeClose: false,
time: 5
});
},

//msg提示(黑色背景)
btnTap02: function(e) {
wcPop({
content: 'msg提示框測試（2s後窗口關閉）',
shade: false,
style: 'background: rgba(17,17,17,.7); color: #fff;',
time: 2
});
},

//資訊框
btnTap03: function(e) {
var index = wcPop({
content: '資訊框 （這裡演示資訊框功能效果，這裡演示資訊框功能效果，這裡演示資訊框功能效果）',

shadeClose: true,
anim: 'rollIn',
xclose: true,

btns: [
{
text: '知道了',
style: 'color: #999',
onTap() {
wcPop.close(index);
console.log("知道了");
}
}
]
});
},

//詢問框
btnTap04: function(e) {
wcPop({
title: '溫馨提示~~~',
content: '警告，非法操作非法操作非法操作非法操作非法操作非法操作非法操作！！！',
shadeClose: false,
anim: 'shake',

btns: [
{
text: '取消',
onTap() {
console.log('您點選了取消！');
wcPop.close();
}
},
{
text: '確定',
style: 'color:#108ee9;',
onTap() {
console.log('您點選了確定！');
}
}
]
});
},

//自定義多按鈕
btnTap05: function(e) {
wcPop({
title: '^-^支付是一種態度',
content: '尊敬的使用者，我們為您提供了“現金支付”和“微信支付兩種方式”，請選擇一種您的常用支付方式進行支付操作！！！',
style: 'border-top:5px solid #108ee9;max-width:90%', //自定義彈窗樣式
anim: 'fadeInUp',
opacity: .85,

btns: [
{
text: '微信支付',
style: 'color:#179b16;',
onTap() {
console.log('您選擇了微信支付！');
}
},
{
text: '支付寶支付',
style: 'color:#108ee9;',
onTap() {
console.log('您選擇了支付寶支付！');
}
},
{
text: '取消',
onTap() {
console.log('您取消了支付請求！');
wcPop.close();
}
}
]
});
},

//底部對話方塊
btnTap06: function(e) {
wcPop({
skin: 'footer',
content: '確定刪除該條資料嗎？刪除後可在7天之內恢復資料，超過7天后資料就無法恢復啦！',
anim: 'footer',
shadeClose: false,

btns: [
{
text: '恢復',
style: 'color:#108ee9;',
onTap() {
console.log('您點選了恢復！');

}
},
{
text: '刪除',
style: 'color:#e63d23;',
onTap() {
console.log('您點選了刪除！');

//刪除回撥提示
wcPop({
anim: 'fadeIn',
content: '您點選了刪除功能',
shade: true,
time: 3
});
}
},
{
text: '取消',
onTap() {
console.log('您點選了取消！');
wcPop.close();
}
}
]
});
},

Line"/>

支付寶小程式彈窗元件|alert警告框|弱提示Toast

您可能也會喜歡…