使用微信小程序開發彈出框應用實例詳解

2020-03-21 16:09:09

字體：大中小

來源：轉載

供稿：網友

微信小程序,小程序開發,彈出框

view class="container" class="zn-uploadimg">	<button type="primary"bindtap="showok">消息提示框</button> 	<button type="primary"bindtap="modalcnt">模態彈窗</button> 	<button type="primary"bindtap="actioncnt">操作菜單</button> </view>

1.消息提示——wx.showToast(OBJECT)

//show.js//獲取應用實例 var app = getApp() Page({	showok:function() {		wx.showToast({		 	title: '成功',		 	icon: 'success',		 	duration: 2000		})	}})

微信小程序,小程序開發,彈出框

2.模態彈窗——wx.showModal(OBJECT)

//show.js//獲取應用實例 var app = getApp() Page({	showok:function() {		wx.showToast({		 	title: '成功',		 	icon: 'success',		 	duration: 2000		})	}})

微信小程序,小程序開發,彈出框

//show.js//獲取應用實例 var app = getApp() Page({	modalcnt:function(){		wx.showModal({			title: '提示',			content: '這是一個模態彈窗',			success: function(res) {				if (res.confirm) {				console.log('用戶點擊確定')				} else if (res.cancel) {				console.log('用戶點擊取消')				}			}		})	}})

微信小程序,小程序開發,彈出框

3.操作菜單——wx.showActionSheet(OBJECT)

微信小程序,小程序開發,彈出框

//show.js//獲取應用實例 var app = getApp() Page({	actioncnt:function(){		wx.showActionSheet({			itemList: ['A', 'B', 'C'],			success: function(res) {				console.log(res.tapIndex)			},			fail: function(res) {				console.log(res.errMsg)			}		})	}})

微信小程序,小程序開發,彈出框

4.指定modal彈出

微信小程序,小程序開發,彈出框

指定哪個modal,可以通過hidden屬性來進行選擇。

<!--show.wxml--><view class="container" class="zn-uploadimg">	<button type="primary"bindtap="modalinput">modal有輸入框</button> </view><modal hidden="{{hiddenmodalput}}" <input type='text'placeholder="請輸入內容" auto-focus/></modal>

//show.js //獲取應用實例 var app = getApp() Page({	data:{  hiddenmodalput:true,  //可以通過hidden是否掩藏彈出框的屬性，來指定那個彈出框 },	//點擊按鈕痰喘指定的hiddenmodalput彈出框	modalinput:function(){		this.setData({		 hiddenmodalput: !this.data.hiddenmodalput		})	},	//取消按鈕	cancel: function(){  this.setData({   hiddenmodalput: true  }); }, //確認 confirm: function(){  this.setData({	  hiddenmodalput: true	 }) }})

微信小程序,小程序開發,彈出框