小程序中带图片modal的实现

前言:做小程序经常会遇到弹框提示,大家应该首选wx.showModal,标题、内容、button内容和颜色都可以自己定义,可以说是满足90%的dialog需求。但是,只支持文本内容,没办法插入图片素材。

先来看看wx.showModal的用法:

wx.showModal({
  title: '温馨提示',
  content: '提示内容。。。',
  confirmText: '确定',
  confirmColor: '#1677d2', 
  cancelText: '取消',
  cancelColor: '#999',
  success: function (res) {
    if (res.confirm) {
      console.log('用户点击确定按钮');
    } else if (res.cancel) {
      console.log('用户点击取消按钮');
    }
  }
})

详细API,请查看:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-react.html#wxshowmodalobject

API中确实没有插入图片素材的参数,因此,只能自己来现实一个图文的modal了~

wxml:

<!-- 图文弹框 -->
<view class='modal-image-text' wx:if="{{modal.isShow}}">
  <view class='modal-mask' bindtap='{{!buttonClicked? "modalClick":""}}'></view>
  <view class='modal-content'>
    <view class='modal-header'>{{modal.title}}</view>
    <view class='modal-body'>
      <view>{{modal.desc}}</view>
      <image src='{{modal.src}}' mode='widthFix' />
    </view>
    <view class='modal-footer'>
      <view class='modal-btn modal-cancel width50' bindtap='{{!buttonClicked? "modalClick":""}}' data-id='0' wx:if="{{modal.cancel}}">{{modal.cancel}}</view>
      <view class='modal-btn modal-ok {{modal.cancel?"width50":""}}' bindtap='{{!buttonClicked? "modalClick":""}}' data-id='1'>{{modal.ok}}</view>
    </view>
  </view>
</view>

js:

modal: {
  isShow: false,  // 图文弹框是否显示
  title: '提示',   // 标题
  desc: '提示内容',  // 内容
  src: '',         // 图片地址,必填,如果没有图片,请直接使用wx.showModal
  ok: '确定',       // 确定按钮文本
  cancel: '',      // 取消按钮文本
}

CSS的代码,这里省略了,JS直接控制modal.isShow就可以让弹框显示或者隐藏了~如果你觉得不够酷炫,可以自己添加CSS动画效果。

效果截图如下:

发现个问题:弹出框后,页面仍然可以滑动。如果你不想让页面滑动,可以添加事件catchtouchmove,这样就会默认阻止事件向上冒泡了,上层view的滑动就不生效了,代码:

<view class='modal-image-text' wx:if="{{modal.isShow}}" catchtouchmove="move">
move: function (e) {
  console.log(222333);    // catch绑定的事件不会向上冒泡
},

后续有时间,我再把上面代码整理成组件,今天就分享到这儿~

原文发布于微信公众号 - 知晓程序员(bainaweb)

原文发表时间:2017-10-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏vue学习

微信小程序日常踩坑后的总结(猜测你也会遇到,持续更新。。。)

(1)图片需是本地图片或者是路径为https的网络图片; (2)使用网络图片要用wx.downloadFile( )下载,否则真机上无法显示图片; (3)w...

992
来自专栏木头编程 - moTzxx

微信小程序Ⅳ [js文件的外部引用]

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

1312
来自专栏快乐八哥

让jQuery Tools Scrollable控件在Mobile Web里面支持resize功能

项目中有两份代码,一份是Main Site,一份是Mobile Site.Main Site里面主页使用到jQuery Tools Scrollable功能,让...

17510
来自专栏超然的博客

自定义按钮~自适应布局~常见bug

582
来自专栏DannyHoo的专栏

iOS 开发中Masonry和SnapKit在使用上的一些区别

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

842
来自专栏cnblogs

bootstrap源码分析之tab(选项卡)

实现tab选项卡的应用,此插件相对比较简单 源码文件: tab.js 实现原理 1、单击一个元素时,首先将原来高亮的元素取消 2、然后给被单击元素进行高亮 3...

1808
来自专栏极客猴

Django学习之旅(五)

按照上篇文章的计划,本文应当讲解文件上传功能的用法。但在学习文件上传之前,我们有必要学习下表单。因为文件上传经常以表单形式提交。因为使用GET方式提交表单方式比...

601
来自专栏谦谦君子修罗刀

react-navigation,刷新你的导航一、属性介绍二、案例

在2017年1月,新开源的react-navigation库备受瞩目。它有类似于原生版性能的体验效果,可能会成为未来RN导航组件中的主力军。该库包含三类组件: ...

9739
来自专栏前端知识分享

第141天:前端开发中浏览器兼容性问题总结(二)

在浏览器中想要垂直居中,设置vertical-align:middle; 不起作用。例如:ie6下文本与文本输入框对不齐,需设置vertical-align:m...

842
来自专栏针针小站

【IFE】Day 2 – 百度前端技术学院 基础学院 学习笔记(二)

1114

扫码关注云+社区