首頁 > 微信小程式 > 小程式開發 > 微信小程式開發彈出框實作方法

微信小程式開發彈出框實作方法

小云云
發布: 2018-03-17 12:05:26
原創
30395 人瀏覽過

本文主要和大家分享微信小程式開發彈出框實作方法,本文所分享的程式碼很清晰,希望能幫助大家。


<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: &#39;成功&#39;,
		  	icon: &#39;success&#39;,
		  	duration: 2000
		})
	}
})
登入後複製
<br/>2.模態彈窗-wx.showModal(OBJECT)

<br/>

<br/>

#

//show.js
//获取应用实例  
var app = getApp()  
Page({
	modalcnt:function(){
		wx.showModal({
			title: &#39;提示&#39;,
			content: &#39;这是一个模态弹窗&#39;,
			success: function(res) {
				if (res.confirm) {
				console.log(&#39;用户点击确定&#39;)
				} else if (res.cancel) {
				console.log(&#39;用户点击取消&#39;)
				}
			}
		})
	}
})
登入後複製
<br/>

<br/>

<br/>3.操作選單-wx.showActionSheet(OBJECT)

<br/>

<br/>
登入後複製
<br/>

//show.js
//获取应用实例  
var app = getApp()  
Page({
	actioncnt:function(){
		wx.showActionSheet({
			itemList: [&#39;A&#39;, &#39;B&#39;, &#39;C&#39;],
			success: function(res) {
				console.log(res.tapIndex)
			},
			fail: function(res) {
				console.log(res.errMsg)
			}
		})
	}
})
登入後複製
<br/>

<br/>

<br/>

4.指定modal彈出

<br/>

<br/>

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

#

###相關推薦:###### ##如何用JQuery寫出登入彈出框############推薦10款實作彈出框特效(收藏)############分享HTML5實作彈出框的效果範例######

以上是微信小程式開發彈出框實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板