时间: 2019-08-27|tag: 194次围观|0 条评论

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/qq_42023289/article/details/83416748

小程序弹窗的几种形式

一.wx.showToast(Object object)

显示消息提示框

小程序弹窗的几种形式插图

1.不带图标的信息提示

小程序弹窗的几种形式插图1

wx.showToast({
  title: '服务暂未开通',
  icon: 'none',
  duration: 2000
})

2.带图标得提示:加载中、提示成功

小程序弹窗的几种形式插图2

加载中提示:

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

wx.showLoading({ title: '加载中', })

setTimeout(function () { wx.hideLoading() }, 2000)

(2)

wx.showToast({
  title: '加载中',
  icon: 'loading',
  duration: 2000
})
成功提示:
wx.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000
})

二.wx.showModal(Object object)

显示模态对话框

https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showModal.html?search-key=modal

小程序弹窗的几种形式插图3

wx.showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  success (res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
});

三.自定义弹窗(可作为授权弹窗使用)

wxml

<view>
  <view class='dialog-container' hidden="{{hasUserInfo}}">
  <text>{{hasUserInfo}}</text>
    <view class='dialog-mask'></view>
    <view class='dialog-info'>
        <view class='dialog-title'>登陆提示</view>
        <view class='dialog-content'>为了您能有更好的体验,请点击授权

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了,原文地址《小程序弹窗的几种形式
   

还没有人抢沙发呢~