微信小程序(十三)小程序弹窗wx.showToast及wx.showModal

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第13天,点击查看活动详情

我这版的小程序中,没有使用到确定取消那样的弹窗,基本上用到的就是,加载中,成功或者失败那种消息提示类的弹窗。

微信本身给我们提供了一个这样的弹窗wx.showToast(Object object),挺好用的,我也没有再去折腾第三方组件的消息提醒弹窗。

Object object 在这里插入图片描述 在这里插入图片描述 这些是官方给出的参数。

注意,icon设置为none的时候,就是没有图标纯文字的状态,这个就很好了。这个位置设计的还是非常人性化的。

这个玩意既能有图标,又能没有图标,百变小能手啊。

注意一下,自定义显示图标不能是动图,他这是只加载图片的第一帧,所以,动图是没有那种效果的,当然,这个弹窗比较简单,对样式要求不高的同学可以尝试一下:

示例代码:

wx.showToast({
      title:'加载中……',
      icon: 'loading',//图标,支持"success"、"loading" 
      // image: '/images/load.gif',
      duration: 1500,//提示的延迟时间,单位毫秒,默认:1500 
      mask: true,//是否显示透明蒙层,防止触摸穿透,默认:false 
    });
复制代码

wx.showModal:

delete(){
 wx.showModal({
  title: '',
  content: '是否确认删除',
  success(res) {
   if (res.confirm) {
    console.log('用户点击确定')
   } else if (res.cancel) {
    console.log('用户点击取消')
   }
  }
 })
}
复制代码

效果如下:

在这里插入图片描述

有好的建议去,请在下方输入你的评论。

欢迎访问个人博客:guanchao.site

欢迎访问我的小程序:打开微信->发现->小程序->搜索“时间里的”

猜你喜欢

转载自juejin.im/post/7105869440918487047