微信小程序-底部彈框組件帶動畫

效果圖

組件

bottomFrame.wxml

<view wx:if='{{flag}}'>
  <view class='wrap {{wrapAnimate}}' style='background:rgba(0,0,0,{{bgOpacity}});'></view>
  <view catchtap='hideFrame' class='frame-wrapper {{frameAnimate}}'>
    <view catchtap='catchNone' class='frame'>
      <!-- 標題 -->
      <view class='title-wrapper flex'>
        <view>{{frameTitle}}</view>
        <image catchtap='hideFrame' src='/image/compare-cuo.png' mode='widthFix'></image>
      </view>
      <!-- 內容 -->
      <slot></slot>
    </view>
  </view>
</view>

bottomFrame.wxss

.wrapAnimate{animation: wrapAnimate 0.5s ease-in-out forwards}
@keyframes wrapAnimate{
  0%{}
  100%{background:rgba(0,0,0,0.35);}
}
.wrapAnimateOut{animation: wrapAnimateOut 0.4s ease-in-out forwards}
@keyframes wrapAnimateOut{
  0%{background:rgba(0,0,0,0.35);}
  100%{background:rgba(0,0,0,0);}
}
.frameAnimate{animation: frameAnimate 0.5s ease forwards;}
@keyframes frameAnimate{
  0%{}
  100%{opacity: 1;top:0vh;}
}
.frameAnimateOut{animation: frameAnimateOut 0.4s ease forwards;}
@keyframes frameAnimateOut{
  0%{opacity: 1;top:0vh;}
  100%{opacity: 0;top:100vh;}
}
.frame-wrapper{position: fixed;height:100vh;width:100vw;z-index: 2;top: 50vh;}
.frame{background: #fff;position: absolute;bottom: 0;width: 88.2vw;padding: 5.9vw 5.9vw 0;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;z-index: 3;}
.title-wrapper{justify-content: space-between;font-size: 4.9vw;color: #4a4a4a;margin-bottom: 5.9vw;}
.title-wrapper>image{width:3.2vw;height:3.2vw;padding:0 5vw;margin-right:-5vw;}
.flex{display: flex;align-items: center;}
.wrap{position: fixed;z-index: 1;top: 0;left: 0;right: 0;bottom: 0;}

bottomFrame.json

{
  "component": true,
  "usingComponents": {}
}

bottomFrame.js

Component({
  properties: {

  },
  data: {
    flag:true,
    wrapAnimate:'wrapAnimate',
    bgOpacity:0,
    frameAnimate:'frameAnimate',
  },
  properties: {
    frameTitle: {
      type: String,
      value: '標題',
    }
  },
  
  methods: {
    showFrame() {
      this.setData({ flag: true, wrapAnimate: 'wrapAnimate', frameAnimate: 'frameAnimate' });
    },
    hideFrame() {
      const that= this;
      that.setData({ wrapAnimate: 'wrapAnimateOut', frameAnimate: 'frameAnimateOut' });
      setTimeout(()=>{
        that.setData({ flag: false})
      },400)
    },
    catchNone(){
      //阻止冒泡
    },
    _showEvent() {
      this.triggerEvent("showEvent");
    },
    _hideEvent() {
      this.triggerEvent("hideEvent");
    }
  }
})

引用

index.wxml

<button bindtap='popup'>底部彈框按鈕</button>
<bottomFrame id="bottomFrame" frameTitle="這是標題" >
  <view class='text'>text-1</view>
  <view class='text'>text-2</view>
  <view class='text'>text-3</view>
</bottomFrame>

index.json

{
  "navigationBarTitleText":"底部彈框組件",
  "usingComponents": {
    "bottomFrame":"/components/bottomFrame/bottomFrame"
  }
} 

index.js

Page({
  popup(){
    this.selectComponent('#bottomFrame').showFrame();
  },
})