首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >支付宝小程序弹窗插件开发|仿微信/android/ios弹窗效果

支付宝小程序弹窗插件开发|仿微信/android/ios弹窗效果

原创
作者头像
andy2018
修改2018-12-03 10:30:28
2.9K0
修改2018-12-03 10:30:28
举报
文章被收录于专栏:h5h5

支付宝小程序自定义弹窗组件|阿里小程序弹窗插件|提示框alert、确认框confirm、toast弱提示

支付宝小程序弹窗交互组件和微信小程序弹窗功能都差不多,对功能有比较多的限制,尤其想要实现丰富一些的弹窗场景就只能自己写组件实现了。

之前有开发过一个微信小程序自定义弹窗插件wcPop,想着支付宝小程序和微信小程序开发模式差不多,就开发了个支付宝小程序弹窗wcPop移植版,功能效果能满足大多数弹窗使用场景。

如果刚好您的项目开发中需要用到的话,希望对您们有丢丢地帮助~~

/**
 * @title 	支付宝小程序自定义弹窗demo
 * @Create	andy
 * @Timer	  2018/11/27 23:50:45 GMT+0800 (中国标准时间)
 * @bolg    https://www.cnblogs.com/xiaoyan2017   Q:282310962  wx:xy190310
 */

// 引入插件js
import {wcPop} from '../../utils/component/wcPop/tpl.js';

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  onLoad(query) {
    // 页面加载
    console.info(`Page onLoad with query: ${JSON.stringify(query)}`);
  },


  /**
   * --------- 支付宝小程序弹窗演示函数.Start ---------
   */
  //msg提示
  btnTap01: function(e) {
    wcPop({
      anim: 'fadeIn',
      content: 'msg提示框测试(5s后窗口关闭)',
      shade: true,
      shadeClose: false,
      time: 5
    });
  },

  //msg提示(黑色背景)
  btnTap02: function(e) {
    wcPop({
      content: 'msg提示框测试(2s后窗口关闭)',
      shade: false,
      style: 'background: rgba(17,17,17,.7); color: #fff;',
      time: 2
    });
  },

  //信息框
  btnTap03: function(e) {
    var index = wcPop({
      content: '信息框 (这里演示信息框功能效果,这里演示信息框功能效果,这里演示信息框功能效果)',

      shadeClose: true,
      anim: 'rollIn',
      xclose: true,

      btns: [
        {
          text: '知道了',
          style: 'color: #999',
          onTap() {
            wcPop.close(index);
            console.log("知道了");
          }
        }
      ]
    });
  },

  //询问框
  btnTap04: function(e) {
    wcPop({
      title: '温馨提示~~~',
      content: '警告,非法操作非法操作非法操作非法操作非法操作非法操作非法操作!!!',
      shadeClose: false,
      anim: 'shake',

      btns: [
        {
          text: '取消',
          onTap() {
            console.log('您点击了取消!');
            wcPop.close();
          }
        },
        {
          text: '确定',
          style: 'color:#108ee9;',
          onTap() {
            console.log('您点击了确定!');
          }
        }
      ]
    });
  },

  //自定义多按钮
  btnTap05: function(e) {
    wcPop({
      title: '^-^支付是一种态度',
      content: '尊敬的用户,我们为您提供了“现金支付”和“微信支付两种方式”,请选择一种您的常用支付方式进行支付操作!!!',
      style: 'border-top:5px solid #108ee9;max-width:90%', //自定义弹窗样式
      anim: 'fadeInUp',
      opacity: .85,

      btns: [
        {
          text: '微信支付',
          style: 'color:#179b16;',
          onTap() {
            console.log('您选择了微信支付!');
          }
        },
        {
          text: '支付宝支付',
          style: 'color:#108ee9;',
          onTap() {
            console.log('您选择了支付宝支付!');
          }
        },
        {
          text: '取消',
          onTap() {
            console.log('您取消了支付请求!');
            wcPop.close();
          }
        }
      ]
    });
  },

  //底部对话框
  btnTap06: function(e) {
    wcPop({
      skin: 'footer',
      content: '确定删除该条数据吗?删除后可在7天之内恢复数据,超过7天后数据就无法恢复啦!',
      anim: 'footer',
      shadeClose: false,

      btns: [
        {
          text: '恢复',
          style: 'color:#108ee9;',
          onTap() {
            console.log('您点击了恢复!');

          }
        },
        {
          text: '删除',
          style: 'color:#e63d23;',
          onTap() {
            console.log('您点击了删除!');

            //删除回调提示
            wcPop({
              anim: 'fadeIn',
              content: '您点击了删除功能',
              shade: true,
              time: 3
            });
          }
        },
        {
          text: '取消',
          onTap() {
            console.log('您点击了取消!');
            wcPop.close();
          }
        }
      ]
    });
  },
  
})

采用原生js写法,看到配置语法,是不是狠眼熟

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档