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

夜中雨滴2023-11-01 22:17

插件介绍

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

插件地址

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

超级福利

uniapp 插件购买超级福利

用法

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

javascript 复制代码 
const dialogModule = uni.requireNativePlugin("leven-popDialog-PopDialogModule");

插件方法

基本弹窗：baseDialog

用法：

javascript 复制代码 
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

用法

javascript 复制代码 
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

用法

javascript 复制代码 
 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（关闭弹窗）

用法

javascript 复制代码 
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

用法

javascript 复制代码 
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

用法

javascript 复制代码 
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

用法

html 复制代码 
<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>
javascript 复制代码 
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，将全力协助你使用本插件。

预览图片

相关推荐
艾小逗1 小时前
uniapp快速入门教程，内容来源于官方文档，仅仅记录快速入门需要了解到的知识点
小程序·uni-app·app·es6
鸭子嘎鹅子呱15 小时前
uniapp使用高德地图设置marker标记点,后续根据接口数据改变某个marker标记点,动态更新
uni-app·map·高德地图
计算机源码社20 小时前
分享一个基于微信小程序的居家养老服务小程序 养老服务预约安卓app uniapp（源码、调试、LW、开题、PPT)
android·微信小程序·uni-app·毕业设计项目·毕业设计源码·计算机课程设计·计算机毕业设计开题
Angus-zoe1 天前
uniapp+vue+微信小程序实现侧边导航
vue.js·微信小程序·uni-app
Pluto & Ethereal1 天前
uni-app尺寸单位、flex布局于背景图片
uni-app
天空下sky1 天前
uniapp+若依 开发租房小程序源码分享
uni-app
帅过二硕ฅ1 天前
uniapp点击跳转到对应位置
前端·javascript·uni-app
佩淇呢2 天前
uniapp vue3 梯形选项卡组件
前端·vue.js·uni-app
[廾匸]2 天前
uni-app获取设备唯一值、静态IP以及公网IP的方法
uni-app·ip·imei·唯一值
luckycoke2 天前
小程序的右侧抽屉开关动画手写效果
前端·javascript·微信小程序·uni-app
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04Coze扣子平台完整体验和实践（附国内和国际版对比）05苍穹外卖面试总结06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）08CCF-CSP认证考试 202406-3 文本分词 100分题解09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10浏览器插件——ModHeader 的分享和学习