小程序填坑之旅--自定义modal弹窗

尽管小程序有很自己的自定义弹框，但是样式都是固定的，只能改变文案以及颜色，因为我们的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