Implementierungsmethode für das WeChat-Applet-Entwicklungs-Popup-Feld

小云云
Freigeben: 2018-03-17 12:05:26
Original
30352 Leute haben es durchsucht

Dieser Artikel teilt Ihnen hauptsächlich die Implementierungsmethode der Popup-Box-Entwicklung im WeChat-Applet mit. Der in diesem Artikel geteilte Code ist sehr klar.


<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>
Nach dem Login kopieren

1. Nachrichtenaufforderung——wx.showToast(OBJECT)

//show.js
//获取应用实例  
var app = getApp()  
Page({
	showok:function() {
		wx.showToast({
		  	title: &#39;成功&#39;,
		  	icon: &#39;success&#39;,
		  	duration: 2000
		})
	}
})
Nach dem Login kopieren
<br/>2.Modales Popup-Fenster – 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;)
				}
			}
		})
	}
})
Nach dem Login kopieren

<br/>

<br/>

3. Betriebsmenü - wx.showActionSheet(OBJECT)<br/>

<br/>

<br/>
Nach dem Login kopieren

<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)
			}
		})
	}
})
Nach dem Login kopieren

<br/>

<br/>

4. Geben Sie das Modal an, das angezeigt werden soll

<br/>

Welches Modal angegeben werden soll, kann über das ausgeblendete Attribut ausgewählt werden.

<br/>

<!--show.wxml-->
<view class="container" class="zn-uploadimg">
	<button type="primary"bindtap="modalinput">modal有输入框</button> 
</view>
<modal hidden="{{hiddenmodalput}}" title="请输入验证码" confirm-text="提交" cancel-text="重置" bindcancel="cancel" bindconfirm="confirm">
    <input type=&#39;text&#39;placeholder="请输入内容" auto-focus/>
</modal>
Nach dem Login kopieren
//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
	    })
    }
    
})
Nach dem Login kopieren


Verwandte Empfehlungen:

So schreiben Sie mit JQuery ein Anmelde-Popup-Fenster

Empfohlene 10 Popup-Fenstereffekte (Sammlung)

Beispiel für einen HTML5-Popup-Box-Effekt teilen

Das obige ist der detaillierte Inhalt vonImplementierungsmethode für das WeChat-Applet-Entwicklungs-Popup-Feld. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage