文档

滑动面板(FloatPanel)

更新时间:

内容型面板,用户可自由灵活上下滑动浏览内容。

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

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

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

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

属性

属性

类型

必填

默认值

说明

minHeight

number

0.18

面板最小高度,单位为页面高度百分比

middleHeight

number

0.35

面板次最大高度,单位为页面高度百分比

maxHeight

number

0.9

面板最大高度,单位为页面高度百分比

lowerThreshold

number

50

距离内容区域底部多远触发 onContentToBottom 回调

withMask

boolean

true

开启蒙层,默认透明

className

string

-

组件根节点类

事件

事件名

说明

类型

onContentToBottom

内容区域滚动到底部,常用于数据加载

() => void

插槽

名称

说明

header

头部内容插槽

content

滑动内容插槽

footer

尾部内容插槽

样式类

类名

说明

amd-swiper-box

组件根节点

amd-swiper-arrow-wrapper

指示器样式

amd-swiper-header

头部区域样式

amd-swiper-scroll-view

内容区域 scroll-view 样式

amd-swiper-footer

底部区域样式

amd-swiper-background

蒙层样式

代码示例

基础使用

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