uniapp原生插件之安卓原生弹窗

插件介绍

安卓原生弹窗组件，集成了常用的弹窗

插件地址

安卓原生弹窗 - DCloud 插件市场

超级福利

uniapp 插件购买超级福利

用法

在需要使用插件的页面加载以下代码

const dialogModule = uni.requireNativePlugin("leven-popDialog-PopDialogModule");

插件方法

基本弹窗：baseDialog

用法：

dialogModule.baseDialog({
      title: this.baseDialogForm.title,
      content: this.baseDialogForm.content,
      cancelBtnText: this.baseDialogForm.cancelBtnText,
      confirmBtnText: this.baseDialogForm.confirmBtnText,
      theme: this.baseDialogForm.themeValue,
      isHideCancel: this.baseDialogForm.isHideCancelValue == 0,
      dismissOnTouchOutside: this.baseDialogForm.dismissOnTouchOutsideValue == 1,
      animation: this.baseDialogForm.animationValue
    }, res => {
      console.log(res)
    })

参数说明

参数名	参数类型	是否必填	默认值	参数描述
title	String	否	空	标题，空字符串不显示
content	String	否	空	内容
theme	Integer	否	0	主题，0.普通主题，1.深色主题
cancelBtnText	String	否	取消	取消按钮的文字
confirmBtnText	String	否	确认	确认按钮的文字
isHideCancel	Boolean	否	false	是否隐藏取消按钮
dismissOnTouchOutside	Boolean	否	true	击弹窗外侧是否关闭弹窗
animation	String	否	ScaleAlphaFromCenter	动画，动画类型请参考示例

回调说明

参数名	参数类型	参数描述
message	String	消息提示
data	Object	数据对象
data.clickBtn	String	点击的按钮，confirm：确认按钮，cancel：取消按钮
code	Integer	返回类型，0.成功，其他：失败

输入框弹窗：inputDialog

用法

dialogModule.inputDialog({
      title: this.dialogForm.title,
      content: this.dialogForm.content,
      inputContent: this.dialogForm.inputContent,
      placeholder: this.dialogForm.placeholder,
      theme: this.dialogForm.themeValue,
      dismissOnTouchOutside: this.dialogForm.dismissOnTouchOutsideValue == 1,
      autoOpenSoftInput: this.dialogForm.autoOpenSoftInputValue == 1,
      isMoveUpToKeyboard: this.dialogForm.isMoveUpToKeyboardValue == 1,
      autoFocusEditText: this.dialogForm.autoFocusEditTextValue == 1
    }, res => {
      console.log(res)
    })

参数说明

参数名	参数类型	是否必填	默认值	参数描述
title	String	否	空	标题，空字符串不显示
content	String	否	空	内容，空字符串不显示
inputContent	String	否	空	输入框内容
placeholder	String	否	空	输入框提示文字
theme	Integer	否	0	主题，0.普通主题，1.深色主题
dismissOnTouchOutside	Boolean	否	true	击弹窗外侧是否关闭弹窗
autoOpenSoftInput	Boolean	否	true	是否自动打开输入法，在是否自动回去焦点为false时有效
isMoveUpToKeyboard	Boolean	否	true	是否要移动到输入法之上
autoFocusEditText	Boolean	否	true	是否自动获取焦点

回调说明

参数名	参数类型	参数描述
message	String	消息提示
data	Object	数据对象
data.clickBtn	String	点击的按钮，confirm：确认按钮，cancel：取消按钮
data.text	String	输入框输入的内容
code	Integer	返回类型，0.成功，其他：失败

列表弹窗：listDialog

用法

 let list = [];
    for (let i = 0; i < 20; i++) {
      list.push("条目" + (i + 1))
    }
    dialogModule.listDialog({
      title: this.dialogForm.title,
      maxHeight: this.dialogForm.maxHeight,
      list: list,
      checkedIndex: 2,
      theme: this.dialogForm.themeValue,
      position: this.dialogForm.positionValue
    }, res => {
      console.log(res)
    })

参数说明

参数名	参数类型	是否必填	默认值	参数描述
title	String	否	空	标题，空字符串不显示
maxHeight	Integer	否	无	最大高度，默认内容高度
list	Array	是	无	列表内容
checkedIndex	Integer	否	-1	选中的索引
theme	Integer	否	0	主题，0.普通主题，1.深色主题
position	Integer	否	0	位置，0.中间，1.底部（默认）

回调说明

参数名	参数类型	参数描述
message	String	消息提示
data	Object	数据对象
data.position	Integer	选中的索引
data.text	String	选中的内容描述
code	Integer	返回类型，0.成功，其他：失败

loading弹窗：loadingDialog(打开弹窗)，hideLoadingDialog（关闭弹窗）

用法

dialogModule.loadingDialog({
      title: this.dialogForm.title,
      theme: this.dialogForm.themeValue,
      style: this.dialogForm.styleValue
    });
    setTimeout(() => {
      dialogModule.hideLoadingDialog();
    }, 5000)

参数说明

参数名	参数类型	是否必填	默认值	参数描述
title	String	否	空	标题，空字符串不显示
style	String	否	spinner	弹窗样式，spinner：菊花式，progressBar：圆圈

图片预览弹窗：imageViewerDialog

用法

dialogModule.imageViewerDialog({
      current: index,
      list: this.urls,
      isInfinite: this.dialogForm.isInfiniteValue == 1,
      isShowSaveBtn: this.dialogForm.saveBtnValue == 1
    })

参数说明

参数名	参数类型	是否必填	默认值	参数描述
current	Integer	是	无	当前展示的图片索引
data	Array	是	\[\]	图片的url集合
isInfinite	Boolean	否	false	是否无限滚动
isShowSaveBtn	Boolean	否	true	是否显示保存按钮

消息提示弹窗：noticeDialog

用法

dialogModule.noticeDialog({
      content: this.dialogForm.content,
      hideTime: 3000, //消失时间，单位：毫秒
      hasShadowBg: this.dialogForm.hasShadowBgValue == 1,
      isCenterHorizontal: this.dialogForm.isCenterHorizontalValue == 1,
      offsetX: this.dialogForm.offsetX,
      offsetY: this.dialogForm.offsetY,
      bgColor: this.dialogForm.bgColor,
      textColor: this.dialogForm.textColor,
      radius: this.dialogForm.radius
    });

参数说明

参数名	参数类型	是否必填	默认值	参数描述
content	String	否	空	内容
hideTime	Integer	否	2000	消失时间，单位：毫秒
hasShadowBg	Boolean	否	true	弹窗是否有半透明背景遮罩
isCenterHorizontal	Boolean	否	true	是否水平居中
offsetX	Integer	否	0	x偏移量，isCenterHorizontal为false时有效
offsetY	Integer	否	100	y偏移量
bgColor	String	否	#ffffff	背景颜色
textColor	String	否	#000000	文本颜色
radius	Integer	否	50	圆角

依附弹窗（1.1.0）

这是一个特殊的弹窗，使用该弹窗必须使用插件自定义的组件leven-popDialogAttach 来包裹你的视图内容，每个组件必须要传递一个属性fid用来确定是哪个组件需要出现弹窗 且同一个页面每个组件的fid不能重复，fid的取值范围1-10

用法

<leven-popDialogAttach ref="refDialogView" fid="1" @onError="error">
      <view @click="attachList('refDialogView')"><text>第一个</text></view>
    </leven-popDialogAttach>
    <leven-popDialogAttach ref="refDialogView1" fid="2" @onError="error">
      <view @click="attachList('refDialogView1')"><text>第二个</text></view>
    </leven-popDialogAttach>
    <leven-popDialogAttach ref="refDialogView3" fid="3" @onError="error">
      <view @click="attachList('refDialogView3')"><text>第三个</text></view>
    </leven-popDialogAttach>

attachList(type) {
      let data = {};
      if (type == "refDialogView") {
        // 列表
        data.list = ["列表1", "列表2", "列表3", "长列表长列表"];
        // 弹窗是否有半透明背景遮罩
        data.hasShadowBg = false;
        // 主题，0.普通主题，1.深色主题
        data.theme = 1;
        // 列表对齐方式,left center(默认) right
        data.gravity = 'left'
      } else if (type == "refDialogView1") {
        data.list = ["列表11", "列表12", "列表13", "长列表长列表"];
      } else {
        data.list = ["列表21", "列表22", "列表23", "长列表长列表"];
        data.gravity = 'right'
      }
      this.$refs[type].attachListDialog(data, res => {
        console.log(res)
      });
    }

内置方法如下

依附列表弹窗 attachListDialog

参数说明

参数名	参数类型	是否必填	默认值	参数描述
list	Array	是	无	数据集合
theme	Integer	否	0	主题，0.普通主题，1.深色主题
hasShadowBg	Boolean	否	true	弹窗是否有半透明背景遮罩
gravity	String	否	center	列表对齐方式,left center right

回调说明

参数名	参数类型	参数描述
message	String	消息提示
data	Object	数据对象
data.position	Integer	选中的索引
data.text	String	选中的内容描述
code	Integer	返回类型，0.成功，其他：失败

依附水平列表弹窗（类似点赞效果） attachHorizontalListDialog

参数说明

参数名	参数类型	是否必填	默认值	参数描述
list	Array	是	无	数据集合
lineColor	String	否	#eeeeee	间隔线的颜色
textColor	String	否	#ffffff	文本颜色
bgColor	String	否	#4D5063	背景颜色
shadowColor	String	否	无	阴影颜色
shadowSize	Integer	否	无	阴影大小
radius	Integer	否	8	圆角

回调说明

参数名	参数类型	参数描述
message	String	消息提示
data	Object	数据对象
data.position	Integer	选中的索引
data.text	String	选中的内容描述
code	Integer	返回类型，0.成功，其他：失败

依附内容弹窗 attachContentDialog

参数说明

参数名	参数类型	是否必填	默认值	参数描述
content	String	否	无	内容
textColor	String	否	#ffffff	文本颜色
bgColor	String	否	#3b3c3d	背景颜色
shadowColor	String	否	无	阴影颜色
shadowSize	Integer	否	无	阴影大小
radius	Integer	否	8	圆角

内置事件

onError 错误提示（具体可查看示例）

联系作者

购买插件前请先试用，试用通过再购买。在试用中如果遇到任何问题，可与作者联系，QQ：334106817，将全力协助你使用本插件。

预览图片