微信小程序四种弹窗方式实例

简介: 微信小程序四种弹窗方式实例

一、wx.showToast(Object object)

1.代码实现

wx.showToast({
     title: '内容', //提示的内容
     duration: 2000, //持续的时间
     icon: 'loading', //图标有success、error、loading、none四种
     mask: true //显示透明蒙层 防止触摸穿透
  })

2.拟态弹窗效果



二 、wx.showModal(Object object)


1.代码实现

  wx.showModal({
    title: '我是标题', //提示的标题
    content: '我是内容', //提示的内容
    success: function(res) {
      if(res.confirm) {
        console.log('用户点击了确定')
      } else if (res.cancel) {
        console.log('用户点击了取消')
      }
    }
  })

2.拟态弹窗效果



三、wx.showLoading(Object object)


显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框

1.代码实现

wx.showLoading({
  title: '加载中',
})
setTimeout(function () {
  wx.hideLoading()
}, 2000)




注意:

wx.showLoading 和 wx.showToast 同时只能显示一个wx.showLoading 应与 wx.hideLoading 配对使用


四、wx.showActionSheet(Object object)


1.代码实现

wx.showActionSheet({
   itemList:['选项一','选项二','其它'], //文字数组
   success: (res) => {
     switch(res.tapIndex) {
       case 0:
         console.log('点击了 选项一')
         break;
       case 1:
         console.log('点击了 选项二')
         break; 
       case 2:
         console.log('点击了 其它选项')
         break;
     }
   },
   fail (res) {
     console.log('取消选项')
   }
 })


2.拟态弹窗效果

相关文章
|
2月前
|
小程序 API 开发者
小程序弹窗
小程序弹窗
80 0
|
2月前
|
小程序
【每周一个小技巧】小程序如何获取页面栈内某个页面的实例
【每周一个小技巧】小程序如何获取页面栈内某个页面的实例
31 9
|
2月前
|
小程序 JavaScript
小程序自定义弹窗禁止底部内容滚动(滚动穿透问题)
小程序自定义弹窗禁止底部内容滚动(滚动穿透问题)
233 0
|
7月前
|
JSON 小程序 前端开发
小程序之实例会议OA的首页 (3)
小程序之实例会议OA的首页 (3)
|
7月前
|
小程序 JavaScript 前端开发
微信小程序(十三)小程序弹窗wx.showToast及wx.showModal
我这版的小程序中,没有使用到确定取消那样的弹窗,基本上用到的就是,加载中,成功或者失败那种消息提示类的弹窗。 微信本身给我们提供了一个这样的弹窗wx.showToast(Object object),挺好用的,我也没有再去折腾第三方组件的消息提醒弹窗。
86 0
|
7月前
|
JSON 小程序 前端开发
微信小程序(十四)小程序自定义弹窗组件
上一篇中说的是小程序自带的弹窗组件,今天,我们来试试小程序的自定义组件,我们自定义一个带确定取消的弹窗组件。 首先,放一下,最终的效果图:
238 0
|
8月前
|
小程序 JavaScript
小程序简单循环列表数据渲染实例
小程序简单循环列表数据渲染实例
47 0
|
8月前
|
小程序 JavaScript
微信小程序弹框提示绑定手环实例
微信小程序弹框提示绑定手环实例
244 0
|
9月前
|
小程序 API
钉钉小程序端https和http发送的实例代码
钉钉小程序端https和http发送的实例代码
224 1
|
10月前
|
传感器 小程序
微信小程序新版隐私协议弹窗实现最新版
微信小程序新版隐私协议弹窗实现最新版
954 1