目录
1. loading 提示框
1. 1 wx.showLoading()显示loading提示框
1.2 wx.hideLoading()关闭 loading 提示框
2. showModal 模态对话框
3. showToast 消息提示框
小程序提供了一些用于界面交互的 API,例如:loading 提示框、消息提示框、模态对话框等 API。
1. loading 提示框
loading 提示框常配合网络请求来使用,用于增加用户体验,对应的API 有两个:
1. wx.showLoading()显示loading提示框
2. wx.hideLoading()关闭 loading 提示框
1. 1 wx.showLoading()显示loading提示框
找到 index.js文件,添加代码:
// 显示 loading 提示框
wx.showLoading({
title: '数据正在加载中...',
})
完整的index.js代码:
Page({
data:{
List:[]
},
// 获取数据
getData(){
// 显示 loading 提示框
wx.showLoading({
title: '数据正在加载中...',
})
// 如果需要发起网络请求,需要使用 wx.request API
wx.request({
// 接口地址
url: 'https://gmall-prod.atguigu.cn/mall-api/index/findBanner',
// 请求方式
method:"GET",
// 请求参数,若没有则为空,什么也不写
data:{},
// 请求头,这里不需要暂时不写
header:{},
// API 调用成功以后,执行的回调
success:(res)=>{
// console.log(res)
if(res.data.code == 200){
this.setData({
List: res.data.data
})
}
},
// API 调用失败以后,执行的回调
fail:(err)=>{
console.log(err)
},
// API 无论成功或者失败,执行的回调
complete:(res)=>{
console.log(res)
}
})
}
})
根据上图我们会发现,并没有将“数据正在加载...”中的三个点加载出来,那是因为提示的内容不会自动换行,如果提示的内容比较多,因为在同一行展示,多出来的内容就会被隐藏掉,我们可以将数据放的少一点,来进行解决:
不过此时,我们再次点击“获取数据”会发现,仍能进行点击:
那是因为此时的mask默认为:false
在小程序开发中,mask: false 是指定一个布尔值的属性,用于控制页面中的遮罩层是否显示。当 mask 的取值为 false 时,表示不显示遮罩层;而当 mask 的取值为 true 时,表示显示遮罩层。
遮罩层通常用于在某些操作(如加载数据、等待用户确认等)进行时,阻止用户对页面进行交互,同时提供视觉上的提示。通过控制 mask 属性,开发者可以灵活地控制页面中遮罩层的显示与隐藏,以提升用户体验和交互效果。
此时的代码可以理解为:
// 显示 loading 提示框
wx.showLoading({
title: '数据加载中...',
// 是否展示透明蒙层,防止触摸穿透
mask: false
})
将false改为true,则点击一次后,会出现透明蒙层,无法在进行点击:
// 显示 loading 提示框
wx.showLoading({
title: '数据加载中...',
// 是否展示透明蒙层,防止触摸穿透
mask: true
})
1.2 wx.hideLoading()关闭 loading 提示框
打开折叠的 wx.request 函数,找到complete更改其内容:
complete:(res)=>{
// console.log(res)
// 关闭 Loading 提示框
wx.hideLoading()
}
则会发现,点击完后,展示内容,提示框关闭:
注意:hideLoading和showLoading必须结合、配对使用。
2. showModal 模态对话框
wx.showModal():模态对话框,常用于询问用户是否执行一些操作。
例如:询问用户是否退出登录、是否删除该商品等。
找到index.wxml文件,创建一个按钮:
<button type="primary" bind:tap="delHandler">删除商品</button>
找到index.js文件,给按钮添加相关属性:
// 删除商品
async delHandler(){
// showModal 显示模态对话框
const res = await wx.showModal({
title: '提示',
content: '是否删除该商品?'
})
console.log(res)
}
点击“删除商品”:
点击“取消”:
点击“确定”:
3. showToast 消息提示框
wx.showToast():消息提示框,根据用户的某些操作来告知操作的结果。
例如:退出成功给用户提示,提示删除成功等。
编写代码:
// 删除商品
async delHandler(){
// showModal 显示模态对话框
const { confirm } = await wx.showModal({
title: '提示',
content: '是否删除该商品?'
})
// console.log(res)
if(confirm){
// showToast消息提示框
wx.showToast({
title: '删除成功',
// 不显示图标
icon:"none",
// 消息提示框两秒后自动关闭
duration:2000
})
}else{
wx.showToast({
title: '取消删除',
icon:"error",
// 消息提示框两秒后自动关闭
duration:2000
})
}
}
点击取消:
点击确定:
微信小程序开发_时光の尘的博客-CSDN博客文章来源:https://www.toymoban.com/news/detail-843204.html
文章来源地址https://www.toymoban.com/news/detail-843204.html
到了这里,关于微信小程序开发系列(二十九)·界面交互API·loading 提示框、showModal模态对话框、showToast消息提示框的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!