微信小程序带图片弹窗简单实现
直奔主题
//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;
}


