微信小程序弹出层

1.消息提示     wx.showToast

微信小程序弹出层

wx.showToast({
title: '成功',
icon: 'success',
duration: 2000
})

2.模态弹窗 wx.showModal

微信小程序弹出层
wx.showModal({
title: '提示',
content: '这是一个模态弹窗',
success (res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
3.操作菜单  wx.showActionSheet
微信小程序弹出层
wx.showActionSheet({
itemList: ['A', 'B', 'C'],
success (res) {
console.log(res.tapIndex)
},
fail (res) {
console.log(res.errMsg)
}
})


4.加载中 wx.showLoading

微信小程序弹出层

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

5.自定义modal(带有表单的弹出框)

微信小程序弹出层


<modal hidden="{{hiddenmodalput}}" title="请输入验证码" confirm-text="提交" cancel-text="重置" bindcancel="cancel" bindconfirm="confirm">  

   <input type='text'placeholder="请输入内容" auto-focus/>  

</modal>  

  1. Page({
  2. data:{
  3. hiddenmodalput:true,
  4. //可以通过hidden是否掩藏弹出框的属性,来指定那个弹出框
  5. },
  6. //点击按钮痰喘指定的hiddenmodalput弹出框
  7. modalinput:function(){
  8. this.setData({
  9. hiddenmodalput: !this.data.hiddenmodalput
  10. })
  11. },
  12. //取消按钮
  13. cancel: function(){
  14. this.setData({
  15. hiddenmodalput: true
  16. });
  17. },
  18. //确认
  19. confirm: function(){
  20. this.setData({
  21. hiddenmodalput: true
  22. })
  23. }
  24. })
 


注意

 
上一篇:苹果也要开发AR眼镜,正与蔡司联手打造


下一篇:pouchdb 安装使用