Mobile Platform as a Service:FloatPanel

• The initial height of the panel is 18% of the default window height. When you scroll up, the height of the panel is raised to 35% and if you continue to scroll up, the height reaches 95% of the default window height.

• When you scroll down, the height is changed back to 35% and then to 18% if you scroll down further.

• You can scroll the panel content area when the panel height reaches the highest.

• You must use a basic library version later than 2.7.7.

Property

Event

Slot

Style class

Code sample

Basic usage

The following shows an example of the code in the index.axml file:

<view class="map">

</view>
<view class="buttonWrapper">
 <switch class="button" onChange="handleToggleMask" inlineSize="small" inline />
 <text>mask</text>
</view>

<float-panel
className="wrapper"
maxHeight="{{0.9}}"
withMask="{{withMask}}"
>
 <view slot="header" class="title">
  <text>
   Header title
  </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">
  Footer content
 </view>
</float-panel>

The following shows an example of the code in the index.js file:

Page({
    data: {
        isvList1: new Array(20).fill(0),
        withMask: false,
        button1Text: 'Close the mask',
    },
    handleToggleMask () {
        this.setData({
            button1Text: !this.data.withMask ? 'Close the mask' : 'Open the mask',
            withMask: !this.data.withMask
        })
    }
})

The following shows an example of the code in the index.acss file:

.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");
}

The following shows an example of the code in the index.json file:

{
    "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"
}

Event listening

The following shows an example of the code in the index.axml file:

<view class="map" />

<float-panel
    className="wrapper"
    maxHeight="{{0.9}}"
    onScroll="handleScrolllStatus"
    onContentToBottom="handleContentScrollToLower"
    ref="saveRef"
>
    <view slot="header" class="title">
        <text>
            The head area, through the onScroll event callback to monitor the current height of the panel is<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="Loading" color="#1677ff" a:if="{{showLoading}}" />
    </view>
    <view slot="footer" class="footer">
        Bottom content
    </view>
</float-panel>

The following shows an example of the code in the index.js file:

Page({
    data: {
        isvList2: new Array(10).fill(0),
        pos1: 'minimum height',
        showLoading: true
    },
    handleContentScrollToLower () {
        setTimeout(() => {
            this.setData({
                isvList2: new Array(20).fill(0),
                showLoading: false
            })
        }, 2000)
    },
    handleScrolllStatus (pos) {
        this.setData({ pos1: pos === 'MAX' ? 'maximum height' : pos === 'MIDDLE' ? 'second maximum height' : 'minimum height' })
    },
    saveRef (ref) {
        this.panel = ref
    },
})

The following shows an example of the code in the index.acss file:

.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");
}

The following shows an example of the code in the index.json file:

{
    "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"
}