小程序分享框-微信小程序的弹框toast-小程序分享-即速应用

小程序分享框-微信小程序的弹框toast-小程序分享

浏览量：1956 时间：2020-03-20 来源：Mars-xq

1.https://developers.weixin.qq.com/miniprogram/dev/api/api-react.html
success的toast
2.示例一：
3.wxml:
toasthidden="{{toastHidden}}"duration="1000"bindchange="onToastChanged"{{toastText}}/toast
4..js
Page({data:{toastHidden:true,//吐司toastText:'',//吐司文本},onToastChanged:function(){this.setData({toastHidden:true});},onLoad:function(){this.setData({toastHidden:false,//吐司toastText:'我是吐司',//吐司文本})}})
5.duration：显示时间hidden：是否隐藏bindchange：duration时长后触发
6.效果图：
7.
8.示例二：
wx.showToast({title:'成功',icon:'success',duration:1000,mask:true})
9.效果图：
10.
加载的toast
11.示例一：
wx.showToast({title:'加载中...',icon:'loading',duration:1000,mask:true})
12.效果图：
13.
14.示例二：
15.显示loading提示框,需主动调用wx.hideLoading才能关闭提示框
wx.showLoading({title:'加载中...',})setTimeout(function(){wx.hideLoading()},2000)
16.效果图：
17.
没有icon的简单toastwx.showToast({title:'这是一条没有icon的toast',icon:'none',duration:1000,mask:true})
18.效果图：
19.
有内容的弹框：wx.showModal({title:'提示',content:'这是一个模态弹窗',success:function(res){if(res.confirm){console.log('用户点击确定')}elseif(res.cancel){console.log('用户点击取消')}}})
20.
21.有列表选择的弹框
wx.showActionSheet({itemList:['A','B','C'],success:function(res){console.log(res.tapIndex)},fail:function(res){console.log(res.errMsg)}})
22.效果图：
23.