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

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

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

wxml:

js:

 

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

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

效果截圖如下:

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

 

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

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



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/23991.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢