showLoading和showModal模态弹窗
showLoading模态框 多数时候是页面加载完成后添加，小程序端和web端一致
showModal模态框 显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。类似于一个API整合了 html 中：alert、confirm。
<template>
<view class="content">
<image class="logo" src="/static/logo.png" @click="clickImg"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<view class="">
<navigator url="/pages/demo/demo">跳转到demo</navigator>
</view>
</view>
</template>
<script>
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)
}
}
}
</script>
<style>
.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;
}
</style>
[showLoading和showToast的区别]
showToast是设定具体的时间关闭，而showLoading需要用事件来中断,例如写一个定时间中断，一般不是用定时器，一般使用一些远程函数来完成
onLoad() {
uni.showLoading({
title: "数据加载中..."
}),
setTimeout(()=>{
uni.hideLoading()
},2000)
},
showLoading也有mask属性，就表示不给他添加遮罩层的话，他所处的页面是可以在弹出这个模态框的同时进行操作的
[showMoadl模态框]
这是一个带确定和取消的模态框
<template>
<view class="content">
<view class="box" @click="clickBox">
</view>
</view>
</template>
<script>
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: "这里是内容，上面是标题"
})
}
}
}
</script>
<style>
.box {
width: 200rpx;
height: 200rpx;
background: pink;
}
</style>
点击盒子之后，弹出了一个带按钮的模态框，小程序端和web端一致
无论点击确认或者取消，都会有返回值
这个模态框的取消按钮可以不要，仅显示确认按钮，还可以有一个输入框，文字内容和文字样式也可以自定义
输入框可能有平台差异，但是小程序和web端还有app都是可用的 配置了输入框如果有content，content中的内容就是输入框的提示内容，没有content，输入框就是空的
同时，不写content，也有placeholderText作为输入框内的提示语，看起来这两者效果是一样的
clickBox (){
uni.showModal({
title:"是否继续",
content: "这里是内容，上面是标题",
editable:true
})
}
接口调用成功或失败有对应的回调函数success和fail
clickBox (){
uni.showModal({
title:"是否继续",
success: res=>{
console.log(res);
},
fail: err=>{
console.log(err);
}
})
}
第一个是点击确认的返回值，第二个是点击取消的返回值，这两个返回值都是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中的内容就是获取到的用户输入
如果用户输入内容，或者什么都没有输入，但是点击取消，就不会获取输入内容，只会获取到用户点击的是取消按钮
