小程式仿微信彈窗效果|微信小程式仿android、ios彈窗樣式
微信小程式自定義模态showModel彈窗實戰，很早之前就想寫一個小程式自定義彈窗擴充練練手，但是由于時間的關系，一直沒有真正的開發（其實就是懶）。好吧，反正最近這段時間稍微比較清閑，趁着這個機會，在空餘時間撸了一個自定義model、toast、actionSheet多類型彈窗。
var util = {
extend: function (target, source){
for (var i in source) {
if (!(i in target)) {
target[i] = source[i];
}
}
return target;
},
timer: {}, // 定時器
show: {}, // 彈窗顯示後回調函數
end: {} // 彈窗銷毀後回調函數
,
// 方向檢測
direction: function(x1,x2,y1,y2){
return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'left' : 'right') : (y1 - y2 > 0 ? 'up' : 'down')
}
,
// 位置檢測（螢幕四周）
chkPosition: function (pageX, pageY, domWidth, domHeight, windowWidth, windowHeight){
var _left = (pageX + domWidth) > windowWidth ? (pageX - domWidth) : pageX;
var _top = (pageY + domHeight) > windowHeight ? (pageY - domHeight) : pageY;
var dpr = 750/windowWidth;
return [_left*dpr, _top*dpr];
}
},
wcPop = function(options){
__this = getCurrentPages()[getCurrentPages().length - 1]; //擷取目前page執行個體(跨頁面挂載)
var that = this,
config = {
id: 'wcPop', //彈窗ID辨別 (不同ID對應不同彈窗)
title: '', //标題
content: '', //内容 - ###注意：引入自定義彈窗模闆 content: ['tplTest01'] tplTest01為模闆名稱(在插件目錄template頁面中配置)
style: '', //自定彈窗樣式
skin: '', //自定彈窗顯示風格 ->目前支援配置 toast(仿微信toast風格)、footer(底部對話框風格)、actionsheet(底部彈出式菜單)、ios|android(仿微信樣式)
icon: '', //彈窗小圖示(success | info | error | loading)
shade: true, //是否顯示遮罩層
shadeClose: true, //是否點選遮罩時關閉層
opacity: '', //遮罩層透明度
xclose: false, //自定義關閉按鈕(預設右上角)
anim: 'scaleIn', //scaleIn：縮放打開(預設) fadeIn：漸變打開 fadeInUpBig：由上向下打開 fadeInDownBig：由下向上打開 rollIn：左側翻轉打開 shake：震動 footer：底部向上彈出
position: '', //彈窗顯示位置(top | right | bottom | left)
follow: null, //跟随定位（适用于長按跟随定位）
time: 0, //設定彈窗自動關閉秒數1、 2、 3
touch: null, //觸摸函數 參數：[ {direction:'left|right|up|down', fn(){}} ]
btns: null //不設定則不顯示按鈕，btn參數: [{按鈕1配置}, {按鈕2配置}]
};
that.opts = util.extend(options, config);
that.init();
}; /* __ 自定義樣式 */
/* 樣式1（toast） */
.popui__toast{background: rgba(17,17,17,.7); border-radius: 12rpx; color: #fff; min-height: 250rpx; width: 250rpx;}
.popui__toast .popui__toast-icon{margin-bottom: 10rpx;}
.popui__toast .popui__toast-icon image{width: 80rpx;}
.popui__toast .popui__panel-cnt{padding: 50rpx 20rpx 20rpx;}
/* 樣式2（底部footer彈窗） */
.popui__footer{background: none; margin: 0 auto; max-width: 100%; width: 95%; position: fixed; left: 0; right: 0; bottom: 20rpx;}
.popui__footer .popui__panel-cnt{background-color: rgba(255,255,255,.8); border-radius: 12rpx 12rpx 0 0; padding: 30rpx 20rpx;}
.popui__footer .popui__panel-btn{display: block;}
.popui__footer .popui__panel-btn:after{display: none;}
.popui__footer .popui__panel-btn .btn{background-color: rgba(255,255,255,.8); border-radius: 0;}
.popui__footer .popui__panel-btn .btn:active{background: #d5d5d5;}
.popui__footer .popui__panel-btn .btn:after{display: none;}
.popui__footer .popui__panel-btn .btn:before{content: ''; border-top: 1rpx solid #c5c5c5; color:#c5c5c5; height: 1rpx; position: absolute; top: 0;right: 0;left: 0; transform: scaleY(.5); transform-origin: 0 0;}
.popui__footer .popui__panel-btn .btn:last-child:before{display: none;}
.popui__footer .popui__panel-btn:first-child .btn:first-child{border-radius: 12rpx 12rpx 0 0;}
.popui__footer .popui__panel-btn:first-child .btn:first-child:before{display: none;}
.popui__footer .popui__panel-btn .btn:nth-last-child(2){border-radius: 0 0 12rpx 12rpx;}
.popui__footer .popui__panel-btn .btn:nth-last-child(1){border-radius: 12rpx; margin-top: 20rpx;}
/* 樣式3（actionsheet底部彈出式菜單【上-下-左-右】） */
.popui__actionsheet{border-radius: 0; margin: 0 auto; max-width: 100%; width: 100%; position: fixed; left: 0; right: 0; bottom: 0;}
.popui__actionsheet .popui__panel-cnt{padding: 30rpx 20rpx;}
.popui__actionsheet .popui__panel-btn{display: block;}
.popui__actionsheet .popui__panel-btn:after{display: none;}
.popui__actionsheet .popui__panel-btn .btn{border-radius: 0;}
.popui__actionsheet .popui__panel-btn .btn:after{display: none;}
.popui__actionsheet .popui__panel-btn .btn:before{content: ''; border-top: 1rpx solid #d5d5d5; color:#d5d5d5; height: 1rpx; position: absolute; top: 0;right: 0;left: 0; transform: scaleY(.5); transform-origin: 0 0;}
.popui__actionsheet .popui__panel-btn .btn:nth-last-child(1){border-top: 5px solid #d5d5d5;}
/* 樣式3-1（actionsheet底部彈出式菜單【仿微信迷你樣式】） */
.popui__actionsheetMini{border-radius: 0; margin: 0 auto; max-width: 100%; width: 100%; position: fixed; left: 0; right: 0; bottom: 0;}
.popui__actionsheetMini .popui__panel-cnt{padding: 30rpx 40rpx; text-align: left;}
.popui__actionsheetMini .popui__panel-btn{display: block;}
.popui__actionsheetMini .popui__panel-btn .btn{padding-left: 40rpx; text-align: left;}
.popui__actionsheetMini .popui__panel-btn .btn:after{display: none;}
/* 樣式3-2（actionsheet底部彈出式菜單【仿微信weui-picker樣式】） */
.popui__actionsheetPicker{border-radius: 0; margin: 0 auto; max-width: 100%; width: 100%; position: fixed; left: 0; right: 0; bottom: 0;}
.popui__actionsheetPicker .popui__panel-tit{font-size: 32rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 150rpx; line-height: 96rpx;}
.popui__actionsheetPicker .popui__panel-cnt{padding: 30rpx 40rpx; text-align: left;}
.popui__actionsheetPicker .popui__panel-btn{display: block; line-height: 96rpx; width: 100%; position: absolute; left: 0; top: 0;}
.popui__actionsheetPicker .popui__panel-btn:after{display: none;}
.popui__actionsheetPicker .popui__panel-btn .btn{border-radius: 0; display: inline-block; padding: 0 40rpx; text-align: left;}
.popui__actionsheetPicker .popui__panel-btn .btn:last-child{float: right;}
.popui__actionsheetPicker .popui__panel-btn .btn:last-child:after{display: none;}