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

小程序模板網

小程序中帶圖片modal的實現

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

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

先來看看wx.showModal的用法:

 

				
  1. wx.showModal({
  2.  
  3. title:'溫馨提示',
  4.  
  5. content:'提示內容。。。',
  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中確實沒有插入圖片素材的參數,因此,只能自己來現實一個圖文的modal了~

wxml:

js:

 

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

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

效果截圖如下:

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

 

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

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



易優小程序(企業版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://www.xiuhaier.com/wxmini/doc/course/23991.html 復制鏈接 如需定制請聯系易優客服咨詢:800182392 點擊咨詢
QQ在線咨詢
AI智能客服 ×