微信小程序自定义弹窗组件showModel|toast信息框

  1. 云栖社区>
  2. 博客>
  3. 正文

微信小程序自定义弹窗组件showModel|toast信息框

xiaoyan2015 2018-11-18 11:33:06 浏览2026
展开阅读全文

小程序仿微信弹窗效果|微信小程序仿android、ios弹窗样式
微信小程序自定义模态showModel弹窗实战,很早之前就想写一个小程序自定义弹窗扩展练练手,但是由于时间的关系,一直没有真正的开发(其实就是懒)。好吧,反正最近这段时间稍微比较清闲,趁着这个机会,在空余时间撸了一个自定义model、toast、actionSheet多类型弹窗。

36a68225af68d095d2ed1c30ef59f6e4e8da022a

f15c96fe997eb6c9e87ee043d08669400f2296c7

6d8ee672d3fb483018dcbb32dff73cad9bf89e49 39585b9f635ba793cc13ef389f81906d2c34246e

3cb4cb208674de78055e4e5479f949596a4e8be8 3668cc4cd9a165af6cee02e45ad8c7636d39ddde

7b9bd25288f6d6c514de6a476bdd419ed87fc574 c251d00ffe054daf38a5a73633b608bdd335ef7f

e3636ad556acf917b5707787d7712ba8386dc1f6 b40e8ae0eb646ad12f58962d8a3e7f1cfbdfee21

df1cc38decaaea000a4fd711c84871167ae8ac22 0b19a3387ac333726543d83584c08315ae0f75d1

21d5c7cee47be28100a8f5b5f9879be4a8acc34f c43d3ef7c61eee3abd72fdfcc40b54c6bb4fee09


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;}


网友评论

登录后评论
0/500
评论
xiaoyan2015
+ 关注