微信小程序自定义弹窗插件wcPop模态框|dialog对话框|Toast弱提示

微信小程序自定义模态弹窗插件|微信小程序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);
}