怎样实现一个带图片显示的模态视图弹窗呢?有时候我们的确有这个需求,自己实现?不不不,哪有官方的方便!
下面我来介绍一种使用官方组件就能实现的方法:
首先找到官方文档:显示模态弹窗的API wx.showModal(OBJECT)
wx.showModal参数介绍
发现并没有设置图片的参数,但是这是一个API,但是组件呢?我并没有在官方文档中找到,但是经过尝试发现是可以显示一个模态弹窗的,即:
wx.showModal({
,
ifconfirm{
)
'用户点击取消')
}
})
可以改写为:
<modal title='提示'hidden"{{modalHidden}}"bindcancel'modalCancel'bindConfirm'modalConfirm'>
</modal>
但是是否隐藏,确认以及取消的回调都需要自己手动绑定至js进行控制,效果还是一样的
普通模态弹窗
下面我们给他加上图片:
//wxml: 代码如下
bindtap'buttonTap'type'primary'>显示弹窗</button>
<view>
></image>
//需要换行的话直接添加view标签
but you open your umbrella when it rains...</view>
You say that you love the wind,
This is why I am afraid; You say that you love me too...
//js: 代码如下
Page /**
* 页面的初始数据
data{
},
* 显示弹窗
buttonTap(){
modalHiddenfalse
* 点击取消
modalCandel{
true
modalConfirm}
效果图如下:
带图片模态弹窗
我们还可以定制图片大小:
wxss: 代码
width 150rpx;
margin10rpx20rpx0rpx0rpx;
}
这样子的话其实大家就明白了,只是一个容器,大家可以尽情的发挥想象去定制,既不用完全自己去实现一个自定义模态弹窗视图,又可以摆脱官方wx.showModal的简陋
效果图如下:
小伙伴们可以随意定制了
图片和诗句我在这抄的 那些高逼格又好玩的诗,赌你没见过.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。