盡管小程序有很自己的自定義彈框绑谣，但是樣式都是固定的党窜，只能改變文案以及顏色，因?yàn)槲覀兊腢I設(shè)計(jì)很不喜歡原生的樣式域仇，沒辦法刑然，沒辦法只有自己寫。
借鑒于這個(gè)文章：（算了暇务，沒有找到泼掠，早到了再補(bǔ)上）
因?yàn)榭紤]到可能復(fù)用，于是封裝再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, //動(dòng)畫時(shí)長(zhǎng)
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的代碼寫完了择镇，接下來(lái)就是引用了，首先我們引用wxss文件括改，可以再app.wxss也可以再你需要使用modal的頁(yè)面的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>
接下來(lái)我們就在js中引用了
var util = require('../../utils/util.js')
Page({
onBtnClick:function(){
util.showModal(this, {
content: '您正在為小強(qiáng)進(jìn)行預(yù)訂操作',
showCancel: false,
ok_text: '我知道了',
image: '/static/img/daili.png'
})
}
})
效果圖：
錄屏1.1.gif
