微信小程序带图片弹窗简单实现

怎样实现一个带图片显示的模态视图弹窗呢?有时候我们的确有这个需求,自己实现?不不不,哪有官方的方便!

使用官方组件实现图片模态弹窗

下面我来介绍一种使用官方组件就能实现的方法:

(PS:最近发现一个问题,如果页面内有textarea时,textarea的层级会比蒙版视图高,并且无法修改,做了一个比较笨的解决方案:小程序textarea层级问题)

(PS:呃呃呃,听说官方的modal组件即将废弃,所以另写了一个可带图片弹窗modal组件,需要可以自取)

首先找到官方文档:​显示模态弹窗的API wx.showModal(OBJECT)

wx.showModal参数介绍

发现并没有设置图片的参数,但是这是一个API,但是组件呢?我并没有在官方文档中找到,但是经过尝试发现<modal></modal>是可以显示一个模态弹窗的,即:

wx.showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  success: function(res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})

可以改写为:

<modal title='提示' hidden="{{modalHidden}}" bindcancel='modalCancel' bindConfirm='modalConfirm'>
    这是一个模态弹窗
</modal>

其中按钮标题可使用comfirmText="新名字"设置,但是发现颜色好像无法自定义。。。找到方法的小伙伴们望告知。

但是是否隐藏,确认以及取消的回调都需要自己手动绑定至js进行控制,效果还是一样的

普通模态弹窗

下面我们给他加上图片:

//wxml: 代码如下

<view class='container'>

  <button class='button' bindtap='buttonTap' type='primary'>显示弹窗</button>

  <modal title="我是标题" hidden="{{modalHidden}}" bindconfirm="modalConfirm" bindcancel="modalCandel">
    <view>
      <image class="image" src="../images/image.jpg" mode='aspectFill'></image>
    </view>
    //需要换行的话直接添加view标签
    <view>You say that you love rain,</view>
    <view>but you open your umbrella when it rains...</view>
    You say that you love the sun, 
    but you find a shadow spot when the sun shines... 
    You say that you love the wind, 
    But you close your windows when wind blows... 
    This is why I am afraid; You say that you love me too...
  </modal>

</view>
//js: 代码如下
Page({

  /**
   * 页面的初始数据
   */
  data: {
    modalHidden: true
  },

  /**
   * 显示弹窗
   */
  buttonTap: function() {
    this.setData({
      modalHidden: false
    })
  },

  /**
   * 点击取消
   */
  modalCandel: function() {
    // do something
    this.setData({
      modalHidden: true
    })
  },

  /**
   *  点击确认
   */
  modalConfirm: function() {
    // do something
    this.setData({
      modalHidden: true
    })
  }
})

效果图如下:

带图片模态弹窗

我们还可以定制图片大小:

wxss: 代码
.image {
  width: 150rpx;
  height: 120rpx;
  margin: 10rpx 20rpx 0rpx 0rpx;
  float: left;
}

这样子的话其实大家就明白了,<modal />只是一个容器,大家可以尽情的发挥想象去定制,既不用完全自己去实现一个自定义模态弹窗视图,又可以摆脱官方wx.showModal的简陋

效果图如下:

小伙伴们可以随意定制了

图片和诗句我在这抄的 那些高逼格又好玩的诗,赌你没见过

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏分享达人秀

几乎不用但要了解的AbsoluteLayout绝对布局

前面几期基本学习了Android开发中常用的四种布局,之所以把AbsoluteLayout放在后面来学习,是由于在实际开发中很少使用,而且在高版本中已经...

19390
来自专栏优启梦

PHP头像九宫格合并 案例

唔,有一些东西需要随机头像! 比如一些聊天网站需要随机展现头像! 9宫格的平铺头像! 每次都会展现不一样的头像! 效果: ? 案例如下: <?php /** ...

667130
来自专栏用户画像

使用jatoolsPrinter实现套打

最近在工作中遇到了套打的需求,前前后后,花了不少时间,现在总结一下套打的实现方式。

6710
来自专栏个人随笔

房上的猫:HTML5基础

一.W3C标准  1)W3C标准不是某一个标准,而是一系列的标准的集合,一个网页主要由三部分组成,即结构(Structure),表现(Presentation)...

461120
来自专栏web前端

02移动端布局

  一、rem      1、意义:当px固定宽度不能适应不同屏幕尺寸时,布局需要,从而产生rem      2、rem 和 em 区别           2...

21690
来自专栏菩提树下的杨过

拼凑了几个自定义的Panel(包括FishEyePanel,WrapPanel等几个常用的布局)

先看效果:  ? wrapPanel的效果在固定宽度的情况下看不出来,可查看在线演示地址:http://images.24city.com/jimmy/Cust...

19150
来自专栏IMWeb前端团队

移动端重构实战系列2——line list

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 ”本系列教程为实战教程,是本人移动端重构经验及思想的一次总结,也是对sand...

22580
来自专栏Android Note

[译] 带你领略 ConstraintLayout 1.1 的新功能前言带你领略 ConstraintLayout 1.1 的新功能

20420
来自专栏图像识别与深度学习

2018-01-07latex

12540
来自专栏程序员的知识天地

HTML/CSS/JS 是如何在浏览器中,渲染成你看到的页面?【图解Chrome】

Chrome 算是程序员的标配了,从全球的市场份额来看,它在全球市场的份额已经超过 60%。

41340

扫码关注云+社区

领取腾讯云代金券