小程序模板網(wǎng)

小程序中帶圖片modal的實現(xiàn)

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

前言：做小程序經(jīng)常會遇到彈框提示，大家應該首選wx.showModal，標題、內(nèi)容、button內(nèi)容和顏色都可以自己定義，可以說是滿足90%的dialog需求。但是，只支持文本內(nèi)容，沒辦法插入圖片素材。

先來看看wx.showModal的用法：

 

				
    
					
  1. 
						wx.showModal({
    2. 
					
  2. 
						 
    3. 
					
  3. 
						title:'溫馨提示',
    4. 
					
  4. 
						 
    5. 
					
  5. 
						content:'提示內(nèi)容。。。',
    6. 
					
  6. 
						 
    7. 
					
  7. 
						confirmText:'確定',
    8. 
					
  8. 
						 
    9. 
					
  9. 
						confirmColor:'#1677d2',
    10. 
					
  10. 
						 
    11. 
					
  11. 
						cancelText:'取消',
    12. 
					
  12. 
						 
    13. 
					
  13. 
						cancelColor:'#999',
    14. 
					
  14. 
						 
    15. 
					
  15. 
						success:function(res) {
    16. 
					
  16. 
						 
    17. 
					
  17. 
						if(res.confirm) {
    18. 
					
  18. 
						 
    19. 
					
  19. 
						console.log('用戶點擊確定按鈕');
    20. 
					
  20. 
						 
    21. 
					
  21. 
						}else if(res.cancel) {
    22. 
					
  22. 
						 
    23. 
					
  23. 
						console.log('用戶點擊取消按鈕');
    24. 
					
  24. 
						 
    25. 
					
  25. 
						}
    26. 
					
  26. 
						 
    27. 
					
  27. 
						}
    28. 
					
  28. 
						 
    29. 
					
  29. 
						})
    30. 
				

				

					詳細API，請查看：https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-react.html#wxshowmodalobject

				

					API中確實沒有插入圖片素材的參數(shù)，因此，只能自己來現(xiàn)實一個圖文的modal了~

				

					wxml:

				

					

				

					js:

				

					 

				

				
    
					
  1. 
						modal: {
    2. 
					
  2. 
						 
    3. 
					
  3. 
						isShow:false,// 圖文彈框是否顯示
    4. 
					
  4. 
						 
    5. 
					
  5. 
						title:'提示',// 標題
    6. 
					
  6. 
						 
    7. 
					
  7. 
						desc:'提示內(nèi)容',// 內(nèi)容
    8. 
					
  8. 
						 
    9. 
					
  9. 
						src:'',// 圖片地址，必填，如果沒有圖片，請直接使用wx.showModal
    10. 
					
  10. 
						 
    11. 
					
  11. 
						ok:'確定',// 確定按鈕文本
    12. 
					
  12. 
						 
    13. 
					
  13. 
						cancel:'',// 取消按鈕文本
    14. 
					
  14. 
						 
    15. 
					
  15. 
						}
    16. 
				

				

					CSS的代碼，這里省略了，JS直接控制modal.isShow就可以讓彈框顯示或者隱藏了~如果你覺得不夠酷炫，可以自己添加CSS動畫效果。

				

					效果截圖如下：

				

					

				

					發(fā)現(xiàn)個問題：彈出框后，頁面仍然可以滑動。如果你不想讓頁面滑動，可以添加事件catchtouchmove，這樣就會默認阻止事件向上冒泡了，上層view的滑動就不生效了，代碼：

				

					 

				

				
    
					
  1. 
						move:function(e) {
    2. 
					
  2. 
						 
    3. 
					
  3. 
						console.log(222333);    // catch綁定的事件不會向上冒泡
    4. 
					
  4. 
						 
    5. 
					
  5. 
						},
    6. 
				

				

					后續(xù)有時間，我再把上面代碼整理成組件，今天就分享到這兒~

					
		

	




            


            


            

            

                

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

                

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

            

          

          

        

      

      
    

  







  

    
  









  
  

    
    
    

    

     QQ在線咨詢