ant-design · miaodongqing · Jun 14, 2022 · May 11, 2022 · Jun 9, 2022 · Jun 14, 2022
diff --git a/demo/app.json b/demo/app.json
@@ -50,7 +50,9 @@
     "pages/Dialog/index",
     "pages/Container/index",
     "pages/Checklist/index",
-    "pages/Empty/index"
+    "pages/Empty/index",
+    "pages/FloatPanel/index",
+    "pages/FloatPanelEvent/index"
   ],
   "window": {
     "enableWK": "YES",

diff --git a/demo/pages/FloatPanel/index.axml b/demo/pages/FloatPanel/index.axml
@@ -0,0 +1,27 @@
+<map />
+<view class="buttonWrapper">
+    <button class="button" onTap="handleToggleMask" inlineSize="small" inline>
+        {{button1Text}}
+    </button>
+</view>
+
+<float-panel
+    className="wrapper"
+    maxHeight="{{0.9}}"
+    withMask="{{withMask}}"
+>
+    <view slot="header" class="title">
+        <text>
+            头部区域
+        </text>
+    </view> 
+    <view class="content" slot="content">
+        <list radius="{{false}}">
+            <list-item class="noLine" a:for="{{isvList1}}">{{index}}</list-item>
+        </list>
+    </view>
+    <view slot="footer" class="footer">
+        底部内容
+    </view>
+</float-panel>
+
diff --git a/demo/pages/FloatPanel/index.js b/demo/pages/FloatPanel/index.js
@@ -0,0 +1,14 @@
+
+Page({
+    data: {
+        isvList1: new Array(20).fill(0),
+        withMask: false,
+        button1Text: '关闭蒙层'
+    },
+    handleToggleMask () {
+        this.setData({
+            button1Text: !this.data.withMask ? '关闭蒙层' : '开启蒙层',
+            withMask: !this.data.withMask
+        })
+    }
+})
diff --git a/demo/pages/FloatPanel/index.json b/demo/pages/FloatPanel/index.json
@@ -0,0 +1,8 @@
+{
+    "usingComponents":{
+        "float-panel": "../../../src/FloatPanel/index",
+        "list": "../../../src/List/index",
+        "list-item": "../../../src/List/ListItem/index"
+    },
+    "allowsBounceVertical": "NO"
+}
diff --git a/demo/pages/FloatPanel/index.less b/demo/pages/FloatPanel/index.less
@@ -0,0 +1,77 @@
+.title {
+    background: #FFFFFF;
+    border-radius: 16rpx 16rpx 0 0;
+    font-family: PingFangSC-Medium;
+    font-size: 36rpx;
+    color: #333333;
+    text-align: center;
+    border-bottom: 1rpx solid #EEEEEE;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 98rpx;
+}
+
+.content {
+    background: #FFFFFF;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 24rpx;
+}
+
+.item {
+    width: 100%;
+    height: 160rpx;
+    border-bottom: 1px solid grey;
+    display: flex;
+
+
+    .left {
+        width: 200rpx;
+        display: flex;
+        align-items: center;
+    }
+
+    .right {
+        flex: 1;
+        text-align: right;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+    }
+}
+
+.footer {
+    padding-bottom: constant(safe-area-inset-bottom); 
+    padding-bottom: env(safe-area-inset-bottom);
+    border-radius: 0;
+    height: 98rpx;
+    background: #FFFFFF;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.wrapper {
+    position: fixed;
+    z-index: 999;
+    bottom: 0;
+    width: 100%;
+    background-color: transparent;
+
+    .amd-swiper-section {
+        background-color: #fff;
+    }
+}
+
+.buttonWrapper {
+    display: flex;
+    position: fixed;
+    top: 0;
+    z-index: 9999;
+
+    .button {
+        margin-left: 20rpx;
+    }
+}
diff --git a/demo/pages/FloatPanelEvent/index.axml b/demo/pages/FloatPanelEvent/index.axml
@@ -0,0 +1,26 @@
+<map />
+
+<float-panel
+    className="wrapper"
+    maxHeight="{{0.7}}"
+    onScroll="handleScrolllStatus"
+    onContentToBottom="handleContentScrollToLower"
+    ref="saveRef"
+>
+    <view slot="header" class="title">
+        <text>
+            头部区域，通过 onScroll 事件回调监听到面板当前高度为<text style="color: red">{{pos1}}</text>
+        </text>
+    </view> 
+    <view class="content" slot="content">
+        <list radius="{{false}}">
+            <list-item a:for="{{isvList2}}">{{index}}</list-item>
+        </list>
+        <loading text="加载中" a:if="{{showLoading}}" />
+    </view>
+    <view slot="footer" class="title">
+        底部内容
+    </view>
+</float-panel>
+
+<view class="safe-area"></view>
diff --git a/demo/pages/FloatPanelEvent/index.js b/demo/pages/FloatPanelEvent/index.js
@@ -0,0 +1,22 @@
+
+Page({
+    data: {
+        isvList2: new Array(10).fill(0),
+        pos1: '最小高度',
+        showLoading: true
+    },
+    handleContentScrollToLower () {
+        setTimeout(() => {
+            this.setData({
+                isvList2: new Array(20).fill(0),
+                showLoading: false
+            })
+        }, 2000)
+    },
+    handleScrolllStatus (pos) {
+        this.setData({ pos1: pos === 'MAX' ? '最大高度' : pos === 'MIDDLE' ? '次最大高度' : '最小高度' })
+    },
+    saveRef (ref) {
+        this.panel = ref
+    },
+})
diff --git a/demo/pages/FloatPanelEvent/index.json b/demo/pages/FloatPanelEvent/index.json
@@ -0,0 +1,9 @@
+{
+    "usingComponents":{
+        "float-panel": "../../../src/FloatPanel/index",
+        "loading": "../../../src/Loading/index",
+        "list": "../../../src/List/index",
+        "list-item": "../../../src/List/ListItem/index"
+    },
+    "allowsBounceVertical": "NO"
+}
diff --git a/demo/pages/FloatPanelEvent/index.less b/demo/pages/FloatPanelEvent/index.less
@@ -0,0 +1,78 @@
+.title {
+    background: #FFFFFF;
+    border-radius: 16rpx 16rpx 0 0;
+    font-family: PingFangSC-Medium;
+    font-size: 36rpx;
+    color: #333333;
+    text-align: center;
+    border: 1rpx solid #EEEEEE;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 88px;
+}
+
+.content {
+    background: #FFFFFF;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 24rpx;
+}
+
+.item {
+    width: 100%;
+    height: 160rpx;
+    border-bottom: 1px solid grey;
+    display: flex;
+
+
+    .left {
+        width: 200rpx;
+        display: flex;
+        align-items: center;
+    }
+
+    .right {
+        flex: 1;
+        text-align: right;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+    }
+}
+
+.wrapper {
+    position: fixed;
+    z-index: 999;
+    bottom: 0;
+    width: 100%;
+    background-color: transparent;
+    padding-bottom: constant(safe-area-inset-bottom); 
+    padding-bottom: env(safe-area-inset-bottom);
+
+    .amd-swiper-section {
+        background-color: #fff;
+    }
+}
+
+.buttonWrapper {
+    display: flex;
+    position: fixed;
+    top: 0;
+    background-color: grey;
+    z-index: 9999;
+
+    .button {
+        margin-left: 20rpx;
+    }
+}
+
+.safe-area {
+    bottom: 0;
+    position: fixed;
+    height: constant(safe-area-inset-bottom); 
+    height: env(safe-area-inset-bottom);
+    background-color: #fff;
+    width: 100%;
+}
diff --git a/demo/utils/constants.js b/demo/utils/constants.js
@@ -66,6 +66,11 @@ export const componentList = [
         nameZN: ' 标签',
         path: '/pages/Tag/index',
       },
+      {
+        name: 'FloatPanel',
+        nameZN: '滑动面板',
+        path: '/pages/FloatPanel/index',
+      },
     ],
   },
   {

diff --git a/src/FloatPanel/index.axml b/src/FloatPanel/index.axml
@@ -0,0 +1,20 @@
+<import-sjs from="./index.sjs" name="sjs"></import-sjs>
+<view class="amd-floatpanel-box {{className || ''}}" style="height: {{ height || 0 }}px;" onTouchMove="{{sjs.handleTouchMove}}" onTouchEnd="{{sjs.handleTouchEnd}}" onTouchStart="{{sjs.handleTouchStart}}" onTouchCancel="{{sjs.handleTouchEnd}}" data-maxHeight="{{ maxHeight }}" data-minHeight="{{ minHeight }}" data-middleHeight="{{ middleHeight }}" change:data-maxHeight="{{sjs.handleHeightInfoChange}}" data-mounted="{{mounted}}" change:data-mounted="{{sjs.doInit}}">
+  <view class="amd-floatpanel-arrow-wrapper">
+    <view class="amd-floatpanel-arrow" style="background-image: url({{arrow}}); height: {{arrowHeight}}rpx" />
+  </view>
+  <view class="amd-floatpanel-header">
+    <slot name="header" />
+  </view>
+  <view class="amd-floatpanel-section">
+    <scroll-view class="amd-floatpanel-scroll-view" style="height: {{scrollViewHeight}}px" disable-lower-scroll="out-of-bounds" disable-upper-scroll="out-of-bounds" upper-threshold="{{10}}" lower-threshold="{{lowerThreshold}}" onScrollToUpper="{{sjs.onScrollViewScrollToUpper}}" onScrollToLower="{{sjs.onScrollViewScrollToLower}}" onTouchStart="{{sjs.onScrollViewScrollStart}}" onTouchEnd="{{sjs.onScrollViewScrollEnd}}" onTouchCancel="{{sjs.onScrollViewScrollCancel}}" onScroll="{{sjs.onScrollViewScroll}}" scroll-y="{{scrollY}}">
+      <view class="amd-floatpanel-scroll-view-content">
+        <slot name="content" />
+      </view>
+    </scroll-view>
+  </view>
+  <view class="amd-floatpanel-footer">
+    <slot name="footer" />
+  </view>
+</view>
+<view a:if="{{withMask}}" class="amd-floatpanel-background" catchTap="{{sjs.handleMaskTap}}"></view>
diff --git a/src/FloatPanel/index.less b/src/FloatPanel/index.less
@@ -0,0 +1,52 @@
+@import (reference) "./variable.less";
+
+.amd-floatpanel-box {
+  background-color: transparent;
+  transition      : all .2s;
+  overflow        : hidden;
+  z-index         : 1;
+  position: fixed;
+  bottom: 0;
+
+  .amd-floatpanel-arrow-wrapper {
+    padding-bottom : 12 * @rpx;
+    display        : flex;
+    align-items    : center;
+    justify-content: center;
+
+    .amd-floatpanel-arrow {
+      width          : 68 * @rpx;
+      background-size: 100% 100%;
+    }
+  }
+
+
+  .amd-floatpanel-section {
+    position: relative;
+
+    .amd-floatpanel-section-bg {
+      position        : absolute;
+      top             : 0;
+      left            : 0;
+      background-color: #fff;
+      width           : 100%;
+      height          : 100vh;
+      z-index         : 0;
+    }
+
+    .amd-floatpanel-scroll-view {
+      position: relative;
+      z-index : 1;
+    }
+  }
+}
+
+.amd-floatpanel-background {
+  top             : 0;
+  bottom          : 0;
+  left            : 0;
+  right           : 0;
+  position        : fixed;
+  z-index         : 1;
+  background-color: rgba(0, 0, 0, 0.55);
+}