一、成功提示弹框

uni.showToast({
    title: '成功提示',
    //将值设置为 success 或者直接不用写icon这个参数
    icon: 'success',
    //显示持续时间为 2秒
    duration: 2000
})

效果如下:
成功提示

若icon参数值设置为none,将不显示“√”图标,只显示文字提示。

uni.showToast({
    title: '成功提示',
    icon: 'none',
    duration: 2000
})

效果如下:
无icon 成功提示

二、加载提示弹框

在执行数据查询、页面数据渲染等过程中弹出提示。以页面渲染为例:

//前端数据请求时,显示加载提示弹框
uni.showLoading({
    title: '加载中...'
});
// 数据从后端接口返回后,提示弹框关闭
uni.hideLoading();

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

三、确认取消提示框

在执行数据删除等操作时弹出提示。

uni.showModal({
        title: '提示',
        content: '确认删除该条信息吗?',
        success: function(res) {
        if (res.confirm) {
            // 执行确认后的操作
        } 
        else {
            // 执行取消后的操作
        }
    }
})

四、列表选择提示弹框

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

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    
})
文章结束 感谢阅读
本文作者: 文章标题:uniapp中常用的几种提示弹框
本文地址:https://lmwa.cn/archives/796.html
版权说明:若无注明,本文皆田小檬博客原创,转载请保留文章出处。
如果觉得我的文章对你有用,可以赞助本站,使本站更好的发展