21 |
您所在的位置：网站首页 › 模态框是什么意思 › 21 |
21
|
showLoading和showModal模态弹窗
showLoading模态框 多数时候是页面加载完成后添加，小程序端和web端一致 showModal模态框 显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。类似于一个API整合了 html 中：alert、confirm。 {{title}} 跳转到demo export default { data() { return { title: 'Hello' } }, onLoad() { uni.showLoading({ title: "数据加载中..." }) }, methods: { clickImg(){ uni.showToast({ title: "发布失败", icon:'error', mask: true }) setTimeout(()=>{ uni.navigateTo({ url:"/pages/demo/demo" }) },1500) } } } .content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .logo { height: 200rpx; width: 200rpx; margin-top: 200rpx; margin-left: auto; margin-right: auto; margin-bottom: 50rpx; } .text-area { display: flex; justify-content: center; } .title { font-size: 36rpx; color: #8f8f94; } 复制代码showToast是设定具体的时间关闭，而showLoading需要用事件来中断,例如写一个定时间中断，一般不是用定时器，一般使用一些远程函数来完成 onLoad() { uni.showLoading({ title: "数据加载中..." }), setTimeout(()=>{ uni.hideLoading() },2000) }, 复制代码showLoading也有mask属性，就表示不给他添加遮罩层的话，他所处的页面是可以在弹出这个模态框的同时进行操作的 [showMoadl模态框]这是一个带确定和取消的模态框 export default { data() { return { title: 'Hello' } }, onLoad() { }, methods: { clickImg(){ uni.showToast({ title: "发布失败", icon:'error', mask: true }), setTimeout(()=>{ uni.navigateTo({ url:"/pages/demo/demo" }) },1500) }, clickBox (){ uni.showModal({ title:"是否继续", content: "这里是内容，上面是标题" }) } } } .box { width: 200rpx; height: 200rpx; background: pink; } 复制代码点击盒子之后，弹出了一个带按钮的模态框，小程序端和web端一致
无论点击确认或者取消，都会有返回值
这个模态框的取消按钮可以不要，仅显示确认按钮，还可以有一个输入框，文字内容和文字样式也可以自定义 输入框可能有平台差异，但是小程序和web端还有app都是可用的 配置了输入框如果有content，content中的内容就是输入框的提示内容，没有content，输入框就是空的 同时，不写content，也有placeholderText作为输入框内的提示语，看起来这两者效果是一样的 clickBox (){ uni.showModal({ title:"是否继续", content: "这里是内容，上面是标题", editable:true }) } 复制代码第一个是点击确认的返回值，第二个是点击取消的返回值，这两个返回值都是success的返回值，点了哪个按钮，哪个按钮返回true 这里没有调用失败，所以，fail方法没有被触发
在成功回调中写一个跳转,实现如果用户点击确认，则跳转到一个新的页面 clickBox (){ uni.showModal({ title:"是否继续", success: res=>{ console.log(res); if(res.confirm){ uni.navigateTo({ url:"/pages/demo/demo" }) } }, fail: err=>{ console.log(err); } }) } 复制代码 带输入框的回调 uni.showModal({ title:"手机验证", editable:true, placeholderText:"请输入手机号：", success(res) { console.log(res); } }) 复制代码confirm值表示用户点击的是确认，content中的内容就是获取到的用户输入
如果用户输入内容，或者什么都没有输入，但是点击取消，就不会获取输入内容，只会获取到用户点击的是取消按钮 |
【本文地址】
今日新闻 |
推荐新闻 |