uni.app所有弹框弹框所出现的问题

确认提示弹框
uni.showModal({
        title: '提示',
        // 提示文字
        content: '确认删除该条信息吗?',
        // 取消按钮的文字自定义
        cancelText: "取消",
        // 确认按钮的文字自定义
        confirmText: "删除",
        //删除字体的颜色,颜色最好是十六进制,不然程序发布上线会出问题
       confirmColor:'#ef111b',
        //取消字体的颜色
        cancelColor:'#000000',
        success: function(res) {
        if (res.confirm) {
            // 执行确认后的操作
        } 
        else {
            // 执行取消后的操作
        }
    }
})
 

因为弹框是异步的,没有this指向,在成功回调或失败回调没办法直接去调用函数或传递参数,

所以要在成功回调后面加bind去绑定外面this,里面进行复制 ,具体的看一下操作

        uni.showModal({
                        title: '提示',
                        content: '确认删除该条吗?',
                        cancelText: "取消",
                        confirmText: "删除",
                        confirmColor:'#ef111b',
                        cancelColor:'#000000',
                        success: function(res) {

                          //变量接this
                            var that = this
                        if (res.confirm) {
                            // 执行确认后的操作
                            that.delFun()
                        } 
                        else {
                            // 执行取消后的操作
                        }

                        // 给弹框绑定this
                    }.bind(this)
                })

常用的弹框我已近在下面罗列出来了

(1)成功的提示:

uni.showToast({

       title: '成功提示',

//将值设置为 success 或者直接不用写icon这个参数

      icon: 'success',

//显示持续时间为 2秒

      duration: 2000

})

//前端数据请求时,显示加载提示弹框

uni.showLoading({

title: '加载中...'

});

// 数据从后端接口返回后,提示弹框关闭

uni.hideLoading()

同上,设置icon参数值为none,将不显示加载图标,只显示文字提示。 

列表选择提示弹框

 执行某些列表选择时弹出提示。

uni.showActionSheet({
    itemList: ['选项一', '选项二', '选项三'],
    success (res) {
       // 选择其中任意一项后,获取其索引(res.tapIndex),从0开始
       console.log(res.tapIndex) 
    },
    fail (res) {
       // 取消后的操作
    }
})
 

 若需要设置字体颜色,可以配置itemColor参数。


uni.showActionSheet({
    itemList: ['选项一', '选项二', '选项三'],
    // 字体颜色
    itemColor: "#55aaff",
    success (res) {
       // 选择其中任意一项后,获取其索引(res.tapIndex),从0开始
       console.log(res.tapIndex) 
    },
    fail (res) {
       // 取消后的操作
    }
})
 

自定义图标 

可以自定义显示图标,如png、jpg、gif等格式

 

uni.showToast({

title: '查询中',

//图片位置

image: '../../static/loading.gif',

duration: 2000

})

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值