小程序系统api---》弹窗

Posted 2020-12-11 世界之大

主要分为四种弹窗：

　　　　一、showToast（‘普通弹出窗‘）

　　　　

wx.showToast(){
  title:‘提示文本‘
}
在showToast中： title是必填的属性; 
　　　　　　　　　duration：显示时间（默认1500毫秒）
　　　　　　　　　icon：显示图标  ------》　 一个有三个参数： 1.success 2.loading 3.none  其中success是默认值，loading就是加载的样式，none则是不显示图标
　　　　　　　　　image：“图片路径”  ------》　　 自定义显示图标；
　　　　　　　　　mask:true   添加遮罩层(默认false)

　　　　二、showModal （‘类似于confirm弹出框’）

 

wx.showModal({
    title:‘你好哇‘ 
    content：‘非常好吧 ‘
})
在showModal中： 没有必填属性；
　　　　　　　　   title:弹出框标题
　　　　　　　　   content:文本内容
　　　　　　　　   showCancel:true    是否显示取消按钮（默认值是true）   
           　　　cancelText:"内容"    取消按钮显示的文字（最大4个字符）
　　　　　　　　　 cancelColor:‘颜色‘   取消按钮的颜色
　　　　　　　　   confirmText:"内容"  确认按钮显示的文字（最大4个字符）
　　　　　　　　　　confirmColor:‘颜色‘ 确认按钮显示的颜色
　　　　　　　　　　success：res=>{
　　　　　　　　　　　　if(res.confirm){
　　　　　　　　　　　　　　console.log(‘用户点击了确认按钮‘)
　　　　　　　　　　　　}else if(!res.confirm){
　　　　　　　　　　　　　　console.log(‘用户点击了取消按钮‘)
　　　　　　　　　　　　}
　　　　　　　　　　}） 

　　　　三、showLoading(加载弹出框)

 

wx.showLoading({
   title:‘文本内容‘ 
})
在showLoading中：title是必填属性
                           mask：遮罩层   默认为false
                           success：()=>{
                            console.log(‘触发成功‘)
                          }                    
showLoading 效果类似于toast中icon等于loading的效果，
区别是：toast有时间限制，而showLoading中没有时间限制
只有调用hideLoading（）方法 才可以关掉
该弹出框一般用于网络请求时，当请求成功时，调用hideLoading（）

　　　　四、showActionSheet(从下方弹出的选择框)

 

wx.showActionSheet({
   itemList:[‘相册‘，‘拍照‘] 
})
在showActionSheet中：itemList是必填属性（填写类型是String）
                                 itemColor：改变按钮文字颜色
                                 success:res=>{
                                   console.log(res)
                                   //res.tapIndex:获取到点击的数组下标可以通过switch进行监听
                                  switch(res.tapIndex){
                                    case 0:
                                     console.log(‘用户选择了相册‘)
                                    break;
                                    default:
                                    break;
                                  }
                                 }