上海网站制作建设怎么样,免费建立自己喜欢的,太原网站搜索引擎优化,西固网站建设
在做小程序的过程中#xff0c;弹窗也算是非常实用的功能了#xff0c;这几天写的几个功能就用到了弹窗#xff0c;也可能是初学者的问题#xff0c;比较菜#xff0c;想找一个可以带图片的自定义的弹窗#xff0c;#xff0c;这里简单介绍一下官方封装好的四个弹窗…
在做小程序的过程中弹窗也算是非常实用的功能了这几天写的几个功能就用到了弹窗也可能是初学者的问题比较菜想找一个可以带图片的自定义的弹窗这里简单介绍一下官方封装好的四个弹窗感觉适合简单的使用想在展示多点内容就不太够了。。
一、wx.showModal
微信小程序提供的用于显示模态对话框的 API它允许开发者创建一个居中显示的弹窗用来显示重要信息或请求用户确认操作。
参数说明
标题title弹窗的标题可以自定义。内容content弹窗显示的具体内容可以是文本或 HTML 格式。显示取消按钮showCancel是否显示取消按钮默认为 true。取消按钮文案cancelText自定义取消按钮的文案默认为“取消”。取消按钮颜色cancelColor自定义取消按钮的文字颜色。确定按钮文案confirmText自定义确定按钮的文案默认为“确定”。确定按钮颜色confirmColor自定义确定按钮的文字颜色。
代码演示
wx.showModal({title: 提示,content: 这是一个模态弹窗需要用户确认操作。,success: function (res) {if (res.confirm) {console.log(用户点击确定);// 用户点击确定后的逻辑处理} else if (res.cancel) {console.log(用户点击取消);// 用户点击取消后的逻辑处理}},fail: function (err) {console.error(弹窗失败, err);// 弹窗失败的错误处理}
});二、wx.showActionSheet
微信小程序中用于显示操作菜单Action Sheet的 API它提供了一种从屏幕底部弹出的菜单选项供用户选择操作。 参数说明 itemList按钮的文字数组数组长度最大为6这是必需的参数。 itemColor按钮的文字颜色默认为 #000000。 success接口调用成功的回调函数回调参数 res 包含 tapIndex表示用户点击的按钮序号从上到下的顺序从0开始。 fail接口调用失败的回调函数。 complete接口调用结束的回调函数调用成功、失败都会执行。
代码演示
wx.showActionSheet({itemList: [选项1, 选项2, 选项3],itemColor: #FF0000, // 自定义文字颜色success (res) {if (!res.cancel) {console.log(res.tapIndex);// 这里可以根据点击的索引执行相应操作}},fail (res) {console.log(res.errMsg);}
});三、 wx.showLoading
微信小程序提供的 API用于在屏幕上显示一个加载提示框通常用于数据加载或进行某些耗时操作时告知用户正在处理中。
参数说明 title字符串类型显示的提示内容默认为 “加载中”。 mask布尔类型是否显示透明蒙层防止触摸穿透默认为 false。 代码演示
// 显示加载提示框
wx.showLoading({title: 数据加载中,mask: true
});// 假设进行一些异步操作
setTimeout(() {// 隐藏加载提示框wx.hideLoading();// 如果需要可以执行其他操作
}, 2000);四、wx.showToast
微信小程序提供的 API用于在屏幕上显示一个轻量级的消息提示框Toast用来给用户反馈操作结果或状态信息。 参数说明 title字符串类型显示的消息内容。 icon字符串类型图标类型有效值包括 success、loading 和 none默认为 none。 duration数字类型提示的显示时间单位毫秒默认为 2000 毫秒。 mask布尔类型是否显示透明蒙层默认为 false。 success函数类型接口调用成功的回调函数。 fail函数类型接口调用失败的回调函数。 complete函数类型接口调用结束的回调函数调用成功、失败都会执行。 代码演示
// 显示成功的提示
wx.showToast({title: 操作成功,icon: success
});// 显示加载中的提示
wx.showToast({title: 加载中,icon: loading
});// 自定义显示时间
wx.showToast({title: 自定义时长,duration: 3000
});总结
总而言之这四个能处理很少一部分弹窗效果 个人感觉因为支持的方法太少了前几天想找个支持照片跟文字的尝试好久都不行
