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

作者: admin 分类: 技术 发布时间: 2022-02-12 16:10

直奔主题

//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;
}

 

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

标签云
站点地图 Sitemap
申请 友情链接
网站运行