十一、uni-app生成弹窗及换行

先看一下官方文档

这里我们区分弹窗showModal和提示窗showToast的功能

// 官网示例效果
uni.showModal({
	title: '提示',
	content: '这是一个模态弹窗',
	success: function (res) {
		if (res.confirm) {
			console.log('用户点击确定');
		} else if (res.cancel) {
			console.log('用户点击取消');
		}
	}
});

在这里插入图片描述
附加传参和换行的弹窗代码

这里的 _that.字段 是由form表单提交定义的onSubmit方法里重新定义了 var _that = this 【非必要】 除非this用的太多了
title是改文本不用说了
content的弹窗内容涉及换行主要是【 \n 】直接用即可 除了有字符串连接需要加 ‘+’
这里我还在确认按钮添加了提示窗 uni.showToast
// 原函数入参那一段可忽略不计 data自己写入参

						// 新增弹窗
						uni.showModal({
							title: '确认提醒',
							content: '每人每天只能生成3次动态码!\n ' + _that.name + '  |  本人' + '(' + _that.idCode + ')' + '\n ' + '同行人数:' + _that.peoples + '\n ' + '车牌号: ' + _that.form.carNumber + '\n' + '目的单位名称: ' + _that.form.companyAddr + '\n' + '联系人: ' + _that.form.contactPeople + '\n' + '联系电话: ' + _that.form.contactPhone,
							success: function(res){
								if(res.confirm){
									console.log('用户点击确认')
									uni.showToast({
										icon: "success",
										title: "生成成功"
									})
									// 原函数入参
									let rmmates = []
									for (let item of _that.items) {
										if (!item.checked) rmmates.push(item.id)
									}
									let data = {
										id: _that.id,
										toCompanyContactPhone: _that.form.contactPhone,
										toCompanyContact: _that.form.contactPeople,
										toCompanyName: _that.form.companyAddr,
										licensePlateNumber: _that.form.carNumber,
										params: {
											rmmates: rmmates
										}
									}
									_that.getQRImage(data)
									// 入参和弹窗确认后 定义getQRImage方法拿到data 在后面用getQRImage做事件的处理
									
								}else if(res.cancel){
									console.log('用户点击取消按钮')
								}
							}
						})

在这里插入图片描述

这样就做好了 但是在微信开发者工具里【换行不识别】→ 所以需要用【预览】功能真机测试

![在这里插入图片描述](https://img-blog.csdnimg.cn/539abd8f0ee34a549a3b75bc62e1db13.png

在这里插入图片描述

点击确定后触发 uni.showToast (上面黑色主题是我微信设置的 与本次内容无关 正常应该是白色的)

在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值