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

主要分为四种弹窗:

    一、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;
                                  }
                                 }                

 

posted @ 2020-06-19 20:18  大云之下  阅读(257)  评论(0编辑  收藏  举报
大云之下