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

效果图:

微信小程序之----弹框组件modal

modal

wxml:

<modal hidden="{{hidden}}" title="这里是title" confirm-text="确定" cancel-text="取消" bindcancel="cancel" bindconfirm="confirm" no-cancel="{{nocancel}}">
       <view>
        <image class="image" src="/static/images/help.jpg" mode='aspectFill'></image>
      </view>
      <view class="fontSize">长按识别二维码</view>
      <view class="fontSize">添加小助手微信咨询</view>
</modal>

js:

Page({
     /**
      * 显示弹窗
      */
    data:{
        hidden:false,
        nocancel:false
    },
     /**
     * 点击取消
     */
    cancel: function(){
        this.setData({
             hidden: true
        });
    },

    /**
     *  点击确认
     */
    confirm: function(){
        this.setData({
          modalHidden: true
        })
})  

我们还可以定制图片大小：

.image {
    width: 620rpx;
    height: 540rpx;
    margin-left: -33rpx;
}
.fontSize {
    text-align: center;
}

参考博客:

https://www.jianshu.com/p/a7c4d394f51a

https://www.cnblogs.com/liululin/p/6001437.html

https://www.cnblogs.com/simba-lkj/p/6509927.html