uniapp自定义弹窗组件|仿微信android/ios弹窗效果

uni-app自定义弹窗模板uniPop组件|uniapp仿微信弹窗|msg信息框|alert对话框|loading提示框

uniPop内置多种动画效果、可供选择类型ios/android、可以自定义弹窗样式/自定义多按钮及事件/弹窗显示位置、自动关闭秒数、遮罩层透明度及点击遮罩是否关闭

uniapp自定义弹窗组件|仿微信android/ios弹窗效果_第1张图片

如上图:H5/小程序/App三端效果兼容性一致。(后续大图均展示App端)

如何引用

uniPop.vue弹窗组件两种引入方式:

  • 在main.js里引入全局组件

import uniPop from './components/uniPop/uniPop.vue'

Vue.component('uni-pop', uniPop) 

  • 在相应页面引入组件


msg信息框效果

uniapp自定义弹窗组件|仿微信android/ios弹窗效果_第2张图片  uniapp自定义弹窗组件|仿微信android/ios弹窗效果_第3张图片

this.$refs.uniPop.show({
    content: 'msg消息提示框(5s后窗口关闭)',
    shade: true,
    shadeClose: false,
    time: 5,
    anim: 'fadeIn',
})

toast弱提示信息 - 支持success / info / error / loading四种图标

uniapp自定义弹窗组件|仿微信android/ios弹窗效果_第4张图片  uniapp自定义弹窗组件|仿微信android/ios弹窗效果_第5张图片

this.$refs.uniPop.show({
    skin: 'toast',
    content: 'loading',
    icon: 'loading', //success | info | error | loading
    shade: false,
    time: 3
})

uniapp自定义弹窗组件|仿微信android/ios弹窗效果_第6张图片

uniapp自定义弹窗组件|仿微信android/ios弹窗效果_第7张图片

uniapp自定义弹窗组件|仿微信android/ios弹窗效果_第8张图片

uniapp自定义弹窗组件|仿微信android/ios弹窗效果_第9张图片

uniapp自定义弹窗组件|仿微信android/ios弹窗效果_第10张图片

uniapp自定义弹窗组件|仿微信android/ios弹窗效果_第11张图片

uniapp自定义弹窗组件|仿微信android/ios弹窗效果_第12张图片

uniapp自定义弹窗组件|仿微信android/ios弹窗效果_第13张图片

uniapp自定义弹窗组件|仿微信android/ios弹窗效果_第14张图片

uniapp自定义弹窗组件|仿微信android/ios弹窗效果_第15张图片

uniapp自定义弹窗组件|仿微信android/ios弹窗效果_第16张图片

uniPop自定义弹窗模板组件

/**
  * @tpl        uni-app自定义弹窗组件 - uniPop.vue
  * @author     andy by 2019-09-20
  * @about      Q:282310962  wx:xy190310
  */

data() {
    return {
        defaultOptions: {
            isVisible: false,       //是否显示弹窗
            
            title: '',              //标题
            content: '',            //内容
            contentStyle: '',       //内容样式
            style: null,            //自定义弹窗样式
            skin: '',               //弹窗风格
            icon: '',               //弹窗图标
            xclose: false,          //自定义关闭按钮
            
            shade: true,            //遮罩层
            shadeClose: true,       //点击遮罩关闭
            opacity: '',            //遮罩透明度
            time: 0,                //自动关闭秒数
            end: null,              //销毁弹窗回调函数
            
            anim: 'scaleIn',        //弹窗动画  scaleIn(默认) | fadeIn | shake | top | right | bottom | left
            position: '',           //弹窗位置  top | right | bottom | left
            
            btns: null,             //弹窗按钮
        },
        opts: {},
        timer: null
    }
},

好了,uniApp自定义组件弹窗介绍就到这里,希望能喜欢??~~

◆ 最后附上uniapp自定义导航栏/tabbar

uniapp自定义导航栏:https://blog.csdn.net/yanxinyun1990/article/details/100919657

uniapp自定义tabbar:https://blog.csdn.net/yanxinyun1990/article/details/101219095

uniapp自定义弹窗组件|仿微信android/ios弹窗效果_第17张图片

 

你可能感兴趣的:(uni-app实例)