小程序有官方的 wx.showModal()方法来定义弹窗内容,但是弹窗显示只能定义文本。可参考官方文档。
自定义图片弹窗:
<!--弹窗的页面--> <div class="modalMask" v-if="isModel"></div> <div class="modalDialog" v-if="changeModel"> <div class="modalContent"> <p class="contentTip"> <image class="guide_img" src="/static/images/guide.jpg"></image> </p> </div> <div class="modalFooter"> <div class="btnConfirm" @tap="confirmSend">确定</div> </div> </div>
<span class="flex-sub icon-info padding-left-sm blue text-xl position-rel" :style="{ top:isIphone?‘-14rpx‘:‘-4rpx‘}" @click="gotoGuide" ></span>
data(){
return{ changeModel: false, isModel: false, } }
methods:{ gotoGuide() { this.changeModel = !this.changeModel; this.isModel = !this.isModel; }, // 确认 confirmSend() { console.log("确认"); this.changeModel = !this.changeModel; this.isModel = !this.isModel; } }
css
/* 引导页弹窗样式 */ .modalMask { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; opacity: 0.5; overflow: hidden; z-index: 9000; color: #fff; } .modalDialog { box-sizing: border-box; width: 640rpx; overflow: hidden; position: fixed; top: 50%; left: 50%; z-index: 9999; background: #fff; margin: -460rpx -320rpx; border-radius: 8rpx; } .modalContent { box-sizing: border-box; display: flex; padding: 50rpx 53rpx; font-size: 32rpx; align-items: center; justify-content: center; flex-direction: column; } .contentTip { text-align: center; font-size: 36rpx; color: #333333; } .teleStyle { background: #ffffff; border: 1px solid #979797; border-radius: 6rpx; line-height: 50rpx; height: 50rpx; box-sizing: border-box; padding-left: 12rpx; width: 460rpx; font-size: 28rpx; /*color: rgba(0,0,0,0.25);*/ margin-top: 30px; } .modalFooter { box-sizing: border-box; display: flex; flex-direction: row; height: 100rpx; border-top: 1px solid #e5e5e5; font-size: 32rpx; line-height: 100rpx; } .btnConfirm { font-size: 32rpx; width: 100%; color: #508cee; text-align: center; } .guide_img{ margin: 0 auto; width: 640rpx; height: 768rpx; }
参考文章地址:https://blog.csdn.net/weixin_37787674/article/details/89674609