开发者社区> xiaoyan2015> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介:
+关注继续查看

小程序仿微信弹窗效果|微信小程序仿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;}


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
微信小程序把玩(二十四)toast组件
原文:微信小程序把玩(二十四)toast组件 toast消息提示框,可用在提示一些信息,比如清楚缓存给用户一个友好的提示!或操作一些请求不想让用户有什么操作,toast也可以做到因为toast显示时其他操作是无效的 主要属性: wxml ...
874 0
微信小程序把玩(十七)input组件
原文:微信小程序把玩(十七)input组件 input输入框使用的频率也是比较高的。。。样式的话自己外面包裹个view自己定义。input属性也不是很多,有需要自己慢慢测,尝试 主要属性: wxml ...
872 0
【转】 个人认为,这是最详细的 android------HttpURLConnection 类用法详解。一些教材没讲到的,它讲到了
站在巨人的肩膀上,渐渐进步。 原文链接:http://www.blogjava.net/supercrsky/articles/247449.html   针对JDK中的URLConnection连接Servlet的问题,网上有虽然有所涉及,但是只是说明了某一个或几个问题,是以FAQ的方式来解决的,而且比较零散,现在对这个类的使用就本人在项目中的使用经验做如下总结: 1:> URL请求的类别: 分为二类,GET与POST请求。
922 0
微信小程序:自定义组件使用全局样式
微信小程序:自定义组件使用全局样式
0 0
微信程序开发系列教程(四)使用微信API创建公众号自定义菜单
微信程序开发系列教程(四)使用微信API创建公众号自定义菜单
0 0
【laravel项目】@4 微信授权登录 --dingo接管api路由之后,自定义路由(1)
【laravel项目】@4 微信授权登录 --dingo接管api路由之后,自定义路由
0 0
3.3【微信小程序全栈开发课程】登录功能(二)--自定义登录弹窗
微信小程序有类似于wx.showToast,wx.showModal等的默认弹窗,但是样式较少,实现不了我们的需求,所以我们这节来自己写一个登录弹窗。还是继续编辑pages/index/index.vue文件
0 0
微信小程序head组件的封装与使用
微信小程序的head是可以进行默认配置head或者自定义封装head组件的,本文将从这两个方面开始进行使用讲解。
0 0
+关注
xiaoyan2015
一枚web前端开发骚年,拥有多年前端开发经验,无聊的时间看看书,写些技术案例分享~~~ Q:282310962 wx:xy190310
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载