插件介绍
安卓原生弹窗组件,集成了常用的弹窗
插件地址
超级福利
用法
在需要使用插件的页面加载以下代码
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,将全力协助你使用本插件。