微信小程序自定义模态弹窗插件|微信小程序model提示框|dialog对话框、确认框|Toast加载提示
对应的主页地址是:https://www.jianshu.com/u/ca5f4c68e450
在平时的一些项目中,有关弹窗应用场景还是蛮多的,不过微信官方提供的弹窗API比较有局限,很多功能不能自定义修改。这个时候也只能自定义组件开发,就只能自己动手封装插件,于是就有这个小程序弹窗插件wcPop1.0诞生了。
小程序插件wcPop解决了小程序开发自定义弹窗出现后,遮罩层下的页面仍可以滚动的方法; 只需给遮罩层的最外层view加catchtouchmove=”preventTouchMove” 即可解决该遮罩层点透问题。
另外该插件还可以自定义多个按钮及事件,内置仿微信弹窗效果 android、ios弹窗样式;
本插件还支持类似微信长按定位弹窗功能
// 弹窗位置检测
if (opt.follow) {
setTimeout(function() {
var _domWidth, _domHeight, _winWidth, _winHeight;
my.createSelectorQuery().select("#" + opt.id + " .popui__panel-child").boundingClientRect().exec(function(rect) {
// 元素宽高
_domWidth = Math.floor(rect[0].width);
_domHeight = Math.floor(rect[0].height);
// 屏幕宽高
_winWidth = my.getSystemInfoSync().windowWidth;
_winHeight = my.getSystemInfoSync().windowHeight;
var _posVal = util.chkPosition(opt.follow[0], opt.follow[1], _domWidth, _domHeight, _winWidth, _winHeight);
__this.setData({ '__options.follow': _posVal });
});
}, 16);
}
callback: function() {
console.log('事件处理');
var that = this, opt = that.opts;
// 清除上一个timer
clearTimeout(util.timer[that.__idx - 1]);
delete util.timer[that.__idx - 1];
// 自动关闭
if (opt.time) {
util.timer[that.__idx] = setTimeout(function() {
exportAPI.close(that.__idx);
}, opt.time * 1000);
}
// 绑定按钮事件
__this.btnTaped = function(e) {
var index = e.currentTarget.dataset.index, btn = opt.btns[index];
typeof btn.onTap === "function" && btn.onTap(e);
}
// 绑定遮罩层关闭
__this.shadeTaped = function(e) {
var _xclose = e.currentTarget.dataset.type;
if (!opt.shadeClose && !_xclose) return;
exportAPI.close(that.__idx);
}
// touch事件模块
__this.preventTouchMove = function() { }
if (opt.touch) {
var eX, eY, curX, curY, distance;
__this.wcTouchStart = function(e) {
eX = Math.floor(e.touches[0].pageX);
eY = Math.floor(e.touches[0].pageY);
}
__this.wcTouchMove = function(e) {
curX = e.touches[0].pageX;
curY = e.touches[0].pageY;
}
__this.wcTouchEnd = function(e) {
if ((curX && Math.abs(eX - curX) > 50) || (curY && Math.abs(eY - curY) > 50)) {
distance = util.direction(eX, curX, eY, curY);
}
// 绑定touch事件
for (var i = 0; i < opt.touch.length; i++) {
if (opt.touch[i].direction == distance) {
typeof opt.touch[i].fn === "function" && opt.touch[i].fn(e);
}
}
// 销毁参数
eX = eY = null;
}
}
// 处理销毁函数
opt.end && (util.end[that.__idx] = opt.end);
}