速信通 免费短信群发体验

中石化、万达等知名客户成功选择,本月特惠最高可送58000条

特惠咨询,每日限30名 >

当前位置: 短信动态

短信接口平台是什么,微信小程序带图片弹窗简单实现

时间:2021-12-23 作者:雪儿 点击:
怎样实现一个带图片显示的模态视图弹窗呢?有时候我们的确有这个需求,自己实现?不不不,哪有官方的方便! 使用官方组件实现图片模态弹窗 下面我来介绍一种使用官方组件就能实现的方法: (PS:最近发现一个问题,如果页面内有textarea时,textarea的层级会比蒙版视图高,并且无法修改,做了一个比较笨的解决方案: 小程序textarea层级问题 ) (PS:呃呃呃,听说官方的modal组件即将废弃,所以另写了一个 可带图片弹窗modal组件 ,需要可以自取) 首先找到

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

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

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

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

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

首先找到官方文档:​显示模态弹窗的API

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=https://cloud.tencent.com/developer/article/1334097/"../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的简陋

效果图如下:

小伙伴们可以随意定制了

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

(责任编辑:haohao)


其它相关文章:短信,接口,平台,是什么,微信,程序,图片,弹窗,简单,实现

友情链接

Copyright 2007-2020 增值电信业务经营许可证 赣B2-20220038 赣ICP备2021004555号-5 | 网站地图 |地区短信