小程序分享框-小程序弹窗的几种形式-小程序分享-即速应用

小程序分享框-小程序弹窗的几种形式-小程序分享

浏览量：1733 时间：2020-03-20 来源：笛子-同學

1.小程序弹窗的几种形式
一.wx.showToast(Objectobject)
2.显示消息提示框
3.
4.1.不带图标的信息提示
5.
wx.showToast({title:'服务暂未开通',icon:'none',duration:2000})
6.2.带图标得提示：加载中、提示成功
7.
8.加载中提示：
9.（1）显示loading提示框。需主动调用wx.hideLoading才能关闭提示框
10.wx.showLoading({title:'加载中',})
11.setTimeout(function(){wx.hideLoading()},2000)
12.(2)
wx.showToast({title:'加载中',icon:'loading',duration:2000})成功提示：wx.showToast({title:'成功',icon:'success',duration:2000})二.wx.showModal(Objectobject)
13.显示模态对话框
14.https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showModal.html?search-key=modal
15.
wx.showModal({title:'提示',content:'这是一个模态弹窗',success(res){if(res.confirm){console.log('用户点击确定')}elseif(res.cancel){console.log('用户点击取消')}}});三.自定义弹窗（可作为授权弹窗使用）
16.wxml
viewviewclass='dialog-container'hidden="{{hasUserInfo}}"text{{hasUserInfo}}/textviewclass='dialog-mask'/viewviewclass='dialog-info'viewclass='dialog-title'登陆提示/viewviewclass='dialog-content'为了您能有更好的体验，请点击授权?/viewviewclass='dialog-footer'buttonclass='dialog-btn'open-type="getUserInfo"bindgetuserinfo='bindGetUserInfo'catchtap='confirmEvent'点击授权/button/view/view/view
17.wxss
18..dialog-mask{position:fixed;z-index:1000;top:0;right:0;left:0;bottom:0;background:rgba(0,0,0,0.3);}.dialog-info{position:fixed;z-index:5000;width:80%;max-width:600rpx;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:#FFFFFF;text-align:center;border-radius:3px;overflow:hidden;}.dialog-title{font-size:36rpx;padding:30rpx30rpx10rpx;}.dialog-content{padding:10rpx30rpx20rpx;min-height:80rpx;font-size:32rpx;line-height:1.3;word-wrap:break-word;word-break:break-all;color:#999999;}.dialog-footer{display:flex;align-items:center;position:relative;line-height:90rpx;font-size:34rpx;}.dialog-btn{display:block;-webkit-flex:1;flex:1;position:relative;color:#3CC51F;}