免费国产欧美国日产_少妇AV一区二区三区无码_蜜桃精品av无码喷奶水小说_jk18禁网站视频_精产国品一二三级产品区别_被夫の上司に犯波多野结衣_78m成人手机免费看_最爽最刺激18禁视频_偷偷色噜狠狠狠狠的777米奇

易優(yōu)GEO 重磅上線 ~ 一站式GEO優(yōu)化工具，讓豆包、文心一言、DeepSeek 在回答中主動推薦你的品牌，搶占AI流量入口！  點擊查看

小程序模板網(wǎng)

微信小程序自定義模態(tài)彈窗插件

發(fā)布時間：2018-04-25 11:07 所屬欄目：小程序開發(fā)教程

最近在寫微信小程序的時候用到了模態(tài)彈窗，但是發(fā)現(xiàn)微信官方給的wx.showModal(OBJECT)可自定義性還是太少，滿足不了某些情況下的需求。

比如，用戶點擊了蒙層，而不是點擊取消按鈕，彈窗也會去執(zhí)行取消事件，并且將彈窗關(guān)閉。文檔里并沒有屏蔽蒙層點擊事件的屬性，也沒有辦法通過其他的方式去屏蔽。

所以就寫了一個可隨意自定義的第三方彈窗插件【wxPopup】

使用方法也很簡單，在要調(diào)用彈窗的位置使用this.showModel()方法，傳入一些參數(shù)，就可以將彈窗顯示出來。

 

				
    
					
  1. 
						this.showModel({
    2. 
					
  2. 
						ModelId: 1,
    3. 
					
  3. 
						ModelTitle: '標(biāo)題(2)',
    4. 
					
  4. 
						ModelContent: '感謝使用wxPoput自定義模態(tài)彈窗,一個可以隨意自定義樣式的微信小程序彈窗插件。已經(jīng)開源到GitHub上。'
    5. 
					
  5. 
						})
    6. 
				

				

					

				

					彈窗的取消事件

				

					 

				

				
    
					
  1. 
						//取消事件
    2. 
					
  2. 
						ancel: function(e){
    3. 
					
  3. 
						if (e.currentTarget.dataset.modelid == 0){
    4. 
					
  4. 
						console.log("用戶點擊了取消(1)")
    5. 
					
  5. 
						} else if (e.currentTarget.dataset.modelid == 1){
    6. 
					
  6. 
						console.log("用戶點擊了取消(2)")
    7. 
					
  7. 
						}
    8. 
					
  8. 
						}
    9. 
				

				

					彈窗的確定事件

				

					 

				

				
    
					
  1. 
						//確定事件
    2. 
					
  2. 
						confirm: function(e){
    3. 
					
  3. 
						if (e.currentTarget.dataset.modelid == 0) {
    4. 
					
  4. 
						console.log("用戶點擊了確定(1)")
    5. 
					
  5. 
						} else if (e.currentTarget.dataset.modelid == 1) {
    6. 
					
  6. 
						console.log("用戶點擊了確定(2)")
    7. 
					
  7. 
						}
    8. 
					
  8. 
						//關(guān)閉模態(tài)彈窗
    9. 
					
  9. 
						this.setData({
    10. 
					
  10. 
						isShowModel: false
    11. 
					
  11. 
						})
    12. 
					
  12. 
						}
    13. 
				

				

					可以通過判斷e.currentTarget.dataset.modelid執(zhí)行對應(yīng)彈窗的事件

				

					彈窗的顯示邏輯就是這樣，然后樣式的話大家可以隨意自定義，相信大家可以玩出更多的花樣。

				

					

				

					最后喜歡這個插件的話就給點個贊唄！

					
		

	




            


            


            

            

                

                    易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源
                    碼云倉庫:starfork
                

                

                    本文地址：http://www.szcjxy.com/wxmini/doc/course/24071.html 復(fù)制鏈接 
                    如需定制請聯(lián)系易優(yōu)客服咨詢： 點擊咨詢 
                

            

          

          

        

      

      
    

  







  

    
  









  
  

    
    
    

    

    在線客服