建一个购物网站需要什么条件,wordpress接入七牛云,手机网站导航设计,wordpress怎么导入产品我们在使用uniapp的过程中#xff0c;是发现有很多各式各样的弹出框供我们选择#xff0c;我们需要将其变换成不同的形态使用#xff1b;我们必须清楚主要的组成部分内容#xff1b;这样才能方便我们使用。
alert#xff1a;只有一个OK按钮#xff0c;点击按钮关闭弹框。…我们在使用uniapp的过程中是发现有很多各式各样的弹出框供我们选择我们需要将其变换成不同的形态使用我们必须清楚主要的组成部分内容这样才能方便我们使用。
alert只有一个OK按钮点击按钮关闭弹框。
confirm包含确定、取消两个按钮点击确定按钮执行对应的回调函数并关闭弹框点击取消按钮关闭弹框。 prompt包含输入框、确定、取消三个按钮点击确定按钮执行对应的回调函数并关闭弹框点击取消按钮关闭弹框。
目录
一、实现思路
二、实现步骤 ①提示后跳转页面 ② 提示成功后跳转页面 ③加载框 ④自定义模态框的颜色 ⑤底部弹出选择模态框
⑥模态框展示图片 三、小结 注意事项 一、实现思路 1. div中添加一个绑定事件 2. 再js中写入需要实现的方法即可
二、实现步骤 ①提示后跳转页面 弹出提示框---点击取消停在本页面点击确认后跳转到成功的页面 点击按钮后 /*complete:绑定事件的方法 */ complete(){ uni.showModal({ title: 提示, //提示信息 content: 你确定订单已经完成了吗, /*点击取消侧在返回原来的页面点击确定跳转到成功的页面*/ success: function (res) { if (res.confirm) { uni.navigateTo({ url: XXX/XXX/X //需要跳转的页面 }) console.log(用户点击确定); } else if (res.cancel) { console.log(用户点击取消); } } }); } ② 提示成功后跳转页面
/*弹出成功的提示后2秒跳转页面 setTimeout定时器*/ XXXXX() { uni.showToast({ title: 成功提示, icon: success, !-- duration: 2000 -- }) setTimeout(() { uni.navigateTo({ url: XXX/XXX/X //需要跳转的页面 }) }, 2000) }, ③加载框 //前端数据请求时显示加载提示弹框 uni.showLoading({ title: 加载中... }); // 数据从后端接口返回后提示弹框关闭 uni.hideLoading(); ④自定义模态框的颜色 uni.showModal({ title: 提示, // 提示文字 content: 确认删除该条信息吗, // 取消按钮的文字自定义 cancelText: 取消, // 确认按钮的文字自定义 confirmText: 删除, //删除字体的颜色 confirmColor:red, //取消字体的颜色 cancelColor:#000000, success: function(res) { if (res.confirm) { // 执行确认后的操作 } else { // 执行取消后的操作 } } }) ⑤底部弹出选择模态框 可自定义字体颜色默认的底部弹出框无法修改布局 uni.showActionSheet({ itemList: [选项一, 选项二, 选项三], // 字体颜色 itemColor: #55aaff, success (res) { // 选择其中任意一项后获取其索引res.tapIndex从0开始 console.log(res.tapIndex) }, fail (res) { // 取消后的操作 } }) ⑥模态框展示图片 可自定义需要使用的模态框图片 uni.showToast({ title: 查询中, //图片位置 image: ../../static/loading.gif, duration: 2000 }) 三、小结 注意事项 1、uni.showToast(XXX)消息提示框 2、uni.showModal(XXX)(显示两个按钮的提示框) 3、uni.showActionSheet(XXX)(从底部向上弹出操作菜单)
