模仿ios浏览器底部弹框效果。
遮罩层淡入淡出，弹框高度根据内容自适应。

  1. <!-- popup-bottom.wxml -->
  2. <view class="wrap" hidden="{{!myVisible}}">
  3.   <view class="mask {{visible ? \'mask-show\' : \'\'}}" bindtap="_onCancel"></view>
  4.   <view class="box" id="modal-box" animation="{{animationData}}">
  5.     <slot />
  6.   </view>
  7. </view>
  1. // popup-bottom.js
  2. Component({
  3.   properties: {
  4.     myVisible: {
  5.       type: Boolean,
  6.       value: false,
  7.       observer: \'_visibleChange\',
  8.     },
  9.   },
  11.   data: {
  12.     visible: false,
  13.     animation: null,
  14.     animationData: null,
  15.   },
  17.   ready: function () {
  18.     const animation = wx.createAnimation({
  19.       duration: 200,
  20.       timingFunction: "linear",
  21.       delay: 0,
  22.     });
  23.     this.setData({
  24.       animation,
  25.     })
  26.   },
  28.   methods: {
  29.     _visibleChange: function (newVal, oldVal, changedPath) {
  30.       if (oldVal === false && newVal === true) {
  31.         setTimeout(function () {
  32.           this._onShow();
  33.         }.bind(this), 0)
  34.       }
  35.     },
  37.     _onShow: function () {
  38.       const __this = this;
  39.       const query = wx.createSelectorQuery().in(this);
  40.       query.select(\'#modal-box\').boundingClientRect(function (res) {
  41.         const { animation } = __this.data;
  42.         animation.translateY(-res.height).step();
  43.         __this.setData({
  44.           visible: true,
  45.           animationData: animation.export(),
  46.         })
  47.       }).exec();
  48.     },
  50.     _onCancel: function () {
  51.       const { animation } = this.data;
  52.       animation.translateY(0).step();
  53.       this.setData({
  54.         visible: false,
  55.         animationData: animation.export(),
  56.       })
  57.       setTimeout(function () {
  58.         this.triggerEvent(\'myOnCancel\');
  59.       }.bind(this), 200)
  60.     },
  62.   },
  63. })
  1. /* popup-bottom.wxss */
  2. .wrap {
  3.   position: fixed;
  4.   left: 0;
  5.   top: 0;
  6.   z-index: 99999;
  7.   width: 100vw;
  8.   height: 100vh;
  9. }
  11. .mask {
  12.   position: fixed;
  13.   top: 0;
  14.   left: 0;
  15.   z-index: 1;
  16.   width: 100%;
  17.   height: 100%;
  18.   background: #000;
  19.   opacity: 0;
  20.   transition: 0.2s;
  21. }
  22. .mask-show {
  23.   opacity: 0.4;
  24. }
  26. .box {
  27.   position: fixed;
  28.   top: 100vh;
  29.   left: 0;
  30.   z-index: 2;
  31.   width: 100%;
  32.   min-height: 100rpx;
  33.   background: #fff;
  34. }
  1. {
  2.   "component": true,
  3.   "usingComponents": {}
  4. }
  1. <button bindtap="handleShow">点我弹出popup</button>
  2. <popup-bottom myVisible="{{visible}}" bindmyOnCancel="handleCancel">
  3.   <view>我是内容</view>
  4.   <view>我是内容</view>
  5.   <view>我是内容</view>
  6.   <view>我是内容</view>
  7.   <view>我是内容</view>
  8. </popup-bottom>
  1. Page({
  2.   data: {
  3.     visible: false,
  4.   },
  6.   handleShow: function () {
  7.     this.setData({ visible: true });
  8.   },
  10.   handleCancel: function () {
  11.     this.setData({ visible: false });
  12.   },
  13. })
  1. {
  2.   "navigationBarTitleText": "底部弹框",
  3.   "usingComponents": {
  4.     "popup-bottom": "/components/popup-bottom/popup-bottom"
  5.   }
  6. }

版权声明：本文为whosmeya原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/whosmeya/p/12557510.html