微信小程序案例需求文档-微信小程序自定义带图片的弹窗组件-微信小程序案例-即速应用

微信小程序案例需求文档-微信小程序自定义带图片的弹窗组件-微信小程序案例

浏览量：1925 时间：2020-03-20 来源：若尘公子

1.现官方文档有wx.showModal（）这个API，基本满足了我们的大部分弹窗需求，但是我们要做到带图片的弹窗，或者弹窗按钮自定义背景颜色，这个API还是不能满足的，所以我们只有自己亲手写一个组件了。话不多说，先看效果图：代码如下：
2.modal.wxml
3.现官方文档有wx.showModal（）这个API，基本满足了我们的大部分弹窗需求，但是我们要做到带图片的弹窗，或者弹窗按钮自定义背景颜色，这个API还是不能满足的，所以我们只有自己亲手写一个组件了。话不多说，先看效果图：代码如下：
4.modal.wxml
确定要退圈吗？狠心离开回心转意
5.modal.wxss:
6./*遮罩层*/
7..mask{width:100%;height:100%;position:fixed;top:0;left:0;background:#000;z-index:9000;opacity:0.5;}
8./*弹出层*/
9..modalDlg{width:67%;position:fixed;top:35%;left:0;right:0;z-index:9999;margin:0auto;background-color:#fff;border-radius:10rpx;display:flex;flex-direction:column;align-items:center;}.flex-around{display:flex;justify-content:space-around;align-items:center;}/*弹出层里面的图片*/
10..modalDlgimage{width:248rpx;height:212rpx;margin:30rpxauto0auto;}
11./*弹出层里面的按钮*/
12..btn{width:180rpx;height:64rpx;background:#44b549;line-height:64rpx;text-align:center;color:#fff;font-size:29rpx;margin:20rpxauto;border-radius:100rpx;}
13..confirm{background:linear-gradient(143deg,rgba(246,61,82,1)0%,rgba(255,151,115,1)100%);}.cancel{background:linear-gradient(143deg,rgba(246,61,82,1)0%,rgba(255,151,115,1)100%);}/*弹出层里面的文字*/
14..test{width:100%;text-align:center;font-size:36rpx;margin:20rpxauto;color:#333;}
15.modal.js:
16.//longbing_card/components/modal/modal.jsComponent({/**
组件的属性列表*/properties:{//接收页面参数showModal:{type:null}},
17./**
组件的初始数据*/data:{},
18./**
组件的方法列表*/methods:{//禁止屏幕滚动preventTouchMove:function(){},//狠心离开confirm:function(){this.setData({showModal:false})},//回心转意cancel:function(){this.setData({showModal:false})}}})
19.页面wxml:点击弹窗
20.页面js:
21.data:{showModal:false,//弹窗}//点击按钮触发弹窗toMore:function(){this.setData({showModal:true})},好了，基本的就是这样。