微信小程序带图片弹窗如何实现

发布时间:2022-03-15 10:59:46 作者:iii
来源:亿速云 阅读:319

本篇内容主要讲解“微信小程序带图片弹窗如何实现 ”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信小程序带图片弹窗如何实现 ”吧!

微信小程序带图片弹窗如何实现

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

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

wx.showModal参数介绍

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

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>

但是是否隐藏,确认以及取消的回调都需要自己手动绑定至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 somethingthis.setData({modalHidden: true})}, /*** 点击确认*/modalConfirm: function() {// do somethingthis.setData({modalHidden: true})}})

带图片模态弹窗  我们还可以定制图片大小:

wxss: 代码

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

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

到此,相信大家对“微信小程序带图片弹窗如何实现 ”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

推荐阅读:
  1. 微信小程序vant弹窗组件怎么实现
  2. 微信小程序自定义弹窗实现

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

微信小程序

上一篇:小程序如何获取图片宽高

下一篇:微信小程序调用扫一扫功能怎么实现

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》