网友真实露脸自拍10p,成人国产精品秘?久久久按摩,国产精品久久久久久无码不卡,成人免费区一区二区三区

小程序模板網

微信小程序自定義模態彈窗插件

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

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

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

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

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

 

				
    
					
  1. 
						this.showModel({
    2. 
					
  2. 
						ModelId: 1,
    3. 
					
  3. 
						ModelTitle: '標題(2)',
    4. 
					
  4. 
						ModelContent: '感謝使用wxPoput自定義模態彈窗,一個可以隨意自定義樣式的微信小程序彈窗插件。已經開源到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. 
						//關閉模態彈窗
    9. 
					
  9. 
						this.setData({
    10. 
					
  10. 
						isShowModel: false
    11. 
					
  11. 
						})
    12. 
					
  12. 
						}
    13. 
				

				

					可以通過判斷e.currentTarget.dataset.modelid執行對應彈窗的事件

				

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

				

					

				

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

					
		

	




            


            


            

            

                

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

                

                    本文地址：http://www.xiuhaier.com/wxmini/doc/course/24071.html 復制鏈接 
                    如需定制請聯系易優客服咨詢：800182392 點擊咨詢 
                

            

          

          

        

      

      
    

  







  

    
  









  
  

    
    
    

    

     QQ在線咨詢 
    

      
    

    
  






 



    

        AI智能客服
        ×