尽管小程序有很自己的自定义弹框，但是样式都是固定的，只能改变文案以及颜色，因为我们的UI设计很不喜欢原生的样式，没办法，没办法只有自己写。
借鉴于这个文章：（算了，没有找到，早到了再补上）
因为考虑到可能复用，于是封装再template里面：
template.wxml
<template name='modal'>
<view class='modal_mask' bindtap='modalclose'></view>
<view class='modal_box' animation='{{modalAnimation}}'>
<view class='modal_title' wx:if='{{modalData.title}}'>{{modalData.title}}</view>
<view class='modal_image' wx:if='{{modalData.image}}'>
<image src='{{modalData.image}}'></image>
</view>
<view class='modal_content' wx:if='{{modalData.content}}'>{{modalData.content}}</view>
<view class='modal_btns'>
<view class='modal_cancelbtn modal_btn' bindtap='modalclose' wx:if='{{modalData.showCancel==true}}'>{{modalData.cancel_text}}</view>
<view class='modal_okbtn modal_btn' bindtap='modalok'>{{modalData.ok_text}}</view>
</view>
</view>
</template>
template.wxss
/*modal样式*/
.modal_mask{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1000;
background:rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.modal_box{
position: fixed;
width: 600rpx;
overflow: hidden;
background: #FAFAFA;
z-index: 1001;
top: 50%;
left: 0;
border-radius: 10rpx;
margin:-150px 75rpx 0 75rpx;
padding-top: 10rpx;
}
.modal_title{
padding: 15rpx;
font: 45rpx;
text-align: center
}
.modal_image{
text-align: center;
margin-top: 54rpx;
}
.modal_image>image{
height: 250rpx;
width: 250rpx;
}
.modal_content{
font-size: 35rpx;
text-align: center;
color: rgba(0, 0, 0, 0.6);
padding: 30rpx;
}
.modal_btns{
display: flex;
display: -webkit-flex;
justify-content: center;
margin-top: 30rpx;
}
.modal_btn{
text-align: center;
border-top: rgba(0, 0, 0, 0.2) solid 1rpx;
padding: 26rpx;
font-size: 38rpx;
width: 100%
}
.modal_cancelbtn{
border-right: rgba(0, 0, 0, 0.2) solid 1rpx
}
.modal_okbtn{
color: #990000
}
util.js //封住方法引用
const showModal = (that, options) => {
let modalData = {
content: options.content?options.content:null,
showCancel: options.showCancel?options.showCancel:false,
cancel_text: options.cancel_text?options.cancel_text:'取消',
ok_text: options.ok_text ? options.ok_text :'确定',
image: options.image?options.image:null,
title:options.title?options.title:null,
}
let animation = wx.createAnimation({
duration: 200, //动画时长
timingFunction: "linear", //线性
delay: 0 //0则不延迟
});
animation.opacity(0).rotateX(-100).step();
that.setData({
modalData: modalData,
showModal: true
});
that.setData({
modalAnimation: animation.export()
})
setTimeout(function () {
animation.opacity(1).rotateX(0).step();
that.setData({
modalAnimation: animation
})
}.bind(this), 200)
that.modalclose=function(){
that.setData({
showModal:false
})
}
that.modalok=function(){
that.setData({
showModal: false
})
}
if(options.success){
that.modalok=options.success
}
}
module.exports = {
showModal:showModal
}
好了，modal的代码写完了，接下来就是引用了，首先我们引用wxss文件，可以再app.wxss也可以再你需要使用modal的页面的wxss文件里引用：
index.wxss
@import './pages/template/default.wxss';
index.wxml
<!--引用模版文件-->
<import src='../template/default.wxml' />
<!--使用模板-->
<template is='modal' wx:if='{{showModal==true}}' data='{{modalData,modalAnimation}}'></template>
接下来我们就在js中引用了
var util = require('../../utils/util.js')
Page({
onBtnClick:function(){
util.showModal(this, {
content: '您正在为小强进行预订操作',
showCancel: false,
ok_text: '我知道了',
image: '/static/img/daili.png'
})
}
})
效果图：
录屏1.1.gif
