滑动面板（FloatPanel）

• 面板初始高度为默认窗口高度的 18%，手指向上滑动面板升起到默认窗口高度的 35 %，继续向上滑动面板高度达到最大默认窗口高度的 95%。

• 手指下滑面板先回到默认窗口高度的 35%，继续向下滑动回到默认窗口高度的 18%。

• 面板内容区域在面板达到最大高度后可滑动。

• 基础库版本号需大于 2.7.7。

属性

事件

插槽

样式类

代码示例

基础使用

index.axml 的代码示例如下：

<view class="map">

</view>
<view class="buttonWrapper">
 <switch class="button" onChange="handleToggleMask" inlineSize="small" inline />
 <text>蒙层</text>
</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>

index.js 的代码示例如下：

Page({
    data: {
        isvList1: new Array(20).fill(0),
        withMask: false,
        button1Text: '关闭蒙层',
    },
    handleToggleMask () {
        this.setData({
            button1Text: !this.data.withMask ? '关闭蒙层' : '开启蒙层',
            withMask: !this.data.withMask
        })
    }
})

index.acss 的代码示例如下：

.title {
    background: #FFF;
    border-radius: 16rpx 16rpx 0 0;
    font-family: PingFangSC-Medium;
    font-size: 36rpx;
    color: #333;
    text-align: center;
    border-bottom: 1rpx solid #EEE;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 98rpx;
    box-sizing: border-box;
}

.content {
    background: #FFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24rpx;
}

.item {
    width: 100%;
    height: 160rpx;
    border-bottom: 1px solid grey;
    display: flex;
}
.item .left {
    width: 200rpx;
    display: flex;
    align-items: center;
}

.item .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: 128rpx;
    background: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.wrapper {
}

.wrapper .amd-swiper-section {
  background-color: #fff;
}

.buttonWrapper {
    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;
    top: 0;
    z-index: 9999;
}

.button {
    margin: 20rpx;
}

.map {
    width: 100vw;
    height: 100vh;
    background-image: url("https://gw.alipayobjects.com/mdn/rms_186a6d/afts/img/A*Z1x_QYGRR1kAAAAAAAAAAAAAARQnAQ");
}

index.json 的代码示例如下：

{
    "usingComponents":{
        "float-panel": "antd-mini/es/FloatPanel/index",
        "list": "antd-mini/es/List/index",
        "list-item": "antd-mini/es/List/ListItem/index",
        "switch": "antd-mini/es/Switch/index"
    },
    "allowsBounceVertical": "NO"
}

事件监听

index.axml 的代码示例如下：

<view class="map" />

<float-panel
    className="wrapper"
    maxHeight="{{0.9}}"
    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 class="noLine" a:for="{{isvList2}}">{{index}}</list-item>
        </list>
        <loading text="加载中" color="#1677ff" a:if="{{showLoading}}" />
    </view>
    <view slot="footer" class="footer">
        底部内容
    </view>
</float-panel>

index.js 的代码示例如下：

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
    },
})

index.acss 的代码示例如下：

.title {
    background: #FFF;
    border-radius: 16rpx 16rpx 0 0;
    font-family: PingFangSC-Medium;
    font-size: 36rpx;
    color: #333;
    text-align: center;
    border-bottom: 1rpx solid #EEE;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 98rpx;
    box-sizing: border-box;
}

.content {
    background: #FFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24rpx;
}

.item {
    width: 100%;
    height: 160rpx;
    border-bottom: 1px solid grey;
    display: flex;
}
.item .left {
    width: 200rpx;
    display: flex;
    align-items: center;
}

.item .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: 128rpx;
    background: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.wrapper {
}

.wrapper .amd-swiper-section {
  background-color: #fff;
}

.buttonWrapper {
    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;
    top: 0;
    z-index: 9999;
}

.button {
    margin: 20rpx;
}

.map {
    width: 100vw;
    height: 100vh;
    background-image: url("https://gw.alipayobjects.com/mdn/rms_186a6d/afts/img/A*Z1x_QYGRR1kAAAAAAAAAAAAAARQnAQ");
}

index.json 的代码示例如下：

{
    "usingComponents":{
        "float-panel": "antd-mini/es/FloatPanel/index",
        "loading": "antd-mini/es/Loading/index",
        "list": "antd-mini/es/List/index",
        "list-item": "antd-mini/es/List/ListItem/index"
    },
    "allowsBounceVertical": "NO"
}