小程序中带图片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 条评论
登录 后参与评论

相关文章

来自专栏10km的专栏

linux下boost编译安装全过程脚本塈bzip2编译安装全过程脚本

boost编译安装 build_boost.sh #!/bin/bash shell_folder=$(cd "$(dirname "$0")";pwd) pu...

2107
来自专栏还债之路

jumpserver开源跳板机用户链接的时候终端显示connection reset by peer

我们使用账号链接的时候,在终端页面显示“connection reset by peer”, 然后我们去看日志信息,会显示“FAILED: Authentica...

411
来自专栏林德熙的博客

win10 uwp 打开文件管理器选择文件

本文:让文件管理器选择文件,不是从文件管理器获得文件。 假如已经获得一些文件,那么如何从文件管理器选择这些文件? 使用方法很简单。

481
来自专栏Samego开发资源

ThinkPHP开发常用信息记录

1253
来自专栏前端说吧

flag - 4-5月份预整理总结的文章目录

2555
来自专栏yw的数据分析

centos 7 安装VCL播放器

centos 自带播放器MP4都无法播放,因此安装VCL播放器 安装epel和remi的repository sudo yum localinstall --n...

2936
来自专栏python全栈布道师

docker安装部署sentry

笔者曾经花了很长时间去一步步安装sentry,成功过也失败过,遇到各种各样的问题,直到后来遇到了sentry,免去我安装部署之苦现在说下步骤

4133
来自专栏白驹过隙

OpenSSL - 利用OpenSSL自签证书和CA颁发证书

34117
来自专栏奇梦博客

AppNode面板成功安装Nextcloud后出现安全警告解决办法

本文针对通过AppNode面板网站管理环境成功安装Nextcloud后出现安全警告解决办法; 首先通过网站管理>建站市场 下载Nextcloud程序:

56513
来自专栏听雨堂

fckeditor上传问题的解决

一、上传时报Invalid Request,问题解决在此: fckeditor编辑器上传文件出现invalid Request问题解决! FCKConfig....

1845

扫描关注云+社区