Sard Uniapp

Appearance

在新窗口打开⤴

FloatingPanel浮动面板1.13+

介绍 ​

浮动在页面底部的面板，可以上下拖动来浏览内容，从而在不离开当前视图的情况下访问更多信息，常用于地图导航。

引入 ​

js
import FloatingPanel from 'sard-uniapp/components/floating-panel/floating-panel.vue'

代码演示 ​

基础使用 ​

FloatingPanel 的默认高度为 100px，用户可以拖动来展开面板，使高度达到 60% 的可用窗口高度。

vue
<template>
  <page-meta :page-style="isLocked ? 'overflow: hidden' : ''"></page-meta>
  <doc-page title="基础用法">
    <sar-floating-panel>
      <sar-list>
        <sar-list-item
          v-for="i in 26"
          :key="i"
          :title="String.fromCharCode(i + 64)"
        ></sar-list-item>
      </sar-list>
    </sar-floating-panel>
  </doc-page>
</template>

<script setup lang="ts">
import { useCurrentPageLock, usePageTopPopup } from 'sard-uniapp'
import { onBackPress } from '@dcloudio/uni-app'

const { isLocked } = useCurrentPageLock()

const { shouldStopBack, hidePopup } = usePageTopPopup()

onBackPress(() => {
  if (shouldStopBack.value) {
    hidePopup()
    return true
  }
})
</script>
vue
<template>
  <page-meta :page-style="isLocked ? 'overflow: hidden' : ''"></page-meta>
  <doc-page title="基础用法">
    <sar-floating-panel>
      <sar-list>
        <sar-list-item
          v-for="i in 26"
          :key="i"
          :title="String.fromCharCode(i + 64)"
        ></sar-list-item>
      </sar-list>
    </sar-floating-panel>
  </doc-page>
</template>

<script setup lang="js">
import { useCurrentPageLock, usePageTopPopup } from "sard-uniapp";
import { onBackPress } from "@dcloudio/uni-app";
const { isLocked } = useCurrentPageLock();
const { shouldStopBack, hidePopup } = usePageTopPopup();
onBackPress(() => {
  if (shouldStopBack.value) {
    hidePopup();
    return true;
  }
});
</script>

自定义锚点 ​

你可以通过 anchors 属性来设置 FloatingPanel 的锚点位置，并通过 v-model:height 来控制当前面板的显示高度。

比如，使面板的高度在 100px、40% 可用窗口高度和 70% 可用窗口高度三个位置停靠：

vue
<template>
  <page-meta :page-style="isLocked ? 'overflow: hidden' : ''"></page-meta>
  <doc-page title="自定义锚点">
    <sar-floating-panel v-model:height="height" :anchors="anchors">
      <view style="padding: 20rpx; text-align: center">
        {{ height.toFixed(0) }}
      </view>
      <sar-list>
        <sar-list-item
          v-for="i in 26"
          :key="i"
          :title="String.fromCharCode(i + 64)"
        ></sar-list-item>
      </sar-list>
    </sar-floating-panel>
  </doc-page>
</template>

<script setup lang="ts">
import { useCurrentPageLock, usePageTopPopup } from 'sard-uniapp'
import { onBackPress } from '@dcloudio/uni-app'
import { getWindowInfo } from 'sard-uniapp'
import { ref } from 'vue'

const { windowHeight } = getWindowInfo()

const anchors = [
  100,
  Math.round(0.4 * windowHeight),
  Math.round(0.7 * windowHeight),
]

const height = ref(anchors[0])
const { isLocked } = useCurrentPageLock()

const { shouldStopBack, hidePopup } = usePageTopPopup()

onBackPress(() => {
  if (shouldStopBack.value) {
    hidePopup()
    return true
  }
})
</script>
vue
<template>
  <page-meta :page-style="isLocked ? 'overflow: hidden' : ''"></page-meta>
  <doc-page title="自定义锚点">
    <sar-floating-panel v-model:height="height" :anchors="anchors">
      <view style="padding: 20rpx; text-align: center">
        {{ height.toFixed(0) }}
      </view>
      <sar-list>
        <sar-list-item
          v-for="i in 26"
          :key="i"
          :title="String.fromCharCode(i + 64)"
        ></sar-list-item>
      </sar-list>
    </sar-floating-panel>
  </doc-page>
</template>

<script setup lang="js">
import { useCurrentPageLock, usePageTopPopup } from "sard-uniapp";
import { onBackPress } from "@dcloudio/uni-app";
import { getWindowInfo } from "sard-uniapp";
import { ref } from "vue";
const { windowHeight } = getWindowInfo();
const anchors = [
  100,
  Math.round(0.4 * windowHeight),
  Math.round(0.7 * windowHeight)
];
const height = ref(anchors[0]);
const { isLocked } = useCurrentPageLock();
const { shouldStopBack, hidePopup } = usePageTopPopup();
onBackPress(() => {
  if (shouldStopBack.value) {
    hidePopup();
    return true;
  }
});
</script>

仅头部拖拽 ​

默认情况下，FloatingPanel 的头部区域和内容区域都可以被拖拽，你可以通过 content-draggable 属性来禁用内容区域的拖拽。

WARNING

支付宝端内容区域始终不能拖拽，无论有没有设置 content-draggable 属性。

vue
<template>
  <page-meta :page-style="isLocked ? 'overflow: hidden' : ''"></page-meta>
  <doc-page title="仅头部拖拽">
    <sar-floating-panel :content-draggable="false">
      <view style="padding: 20rpx; text-align: center">内容不可拖拽</view>
      <sar-list>
        <sar-list-item
          v-for="i in 26"
          :key="i"
          :title="String.fromCharCode(i + 64)"
        ></sar-list-item>
      </sar-list>
    </sar-floating-panel>
  </doc-page>
</template>

<script setup lang="ts">
import { useCurrentPageLock, usePageTopPopup } from 'sard-uniapp'
import { onBackPress } from '@dcloudio/uni-app'

const { isLocked } = useCurrentPageLock()

const { shouldStopBack, hidePopup } = usePageTopPopup()

onBackPress(() => {
  if (shouldStopBack.value) {
    hidePopup()
    return true
  }
})
</script>
vue
<template>
  <page-meta :page-style="isLocked ? 'overflow: hidden' : ''"></page-meta>
  <doc-page title="仅头部拖拽">
    <sar-floating-panel :content-draggable="false">
      <view style="padding: 20rpx; text-align: center">内容不可拖拽</view>
      <sar-list>
        <sar-list-item
          v-for="i in 26"
          :key="i"
          :title="String.fromCharCode(i + 64)"
        ></sar-list-item>
      </sar-list>
    </sar-floating-panel>
  </doc-page>
</template>

<script setup lang="js">
import { useCurrentPageLock, usePageTopPopup } from "sard-uniapp";
import { onBackPress } from "@dcloudio/uni-app";
const { isLocked } = useCurrentPageLock();
const { shouldStopBack, hidePopup } = usePageTopPopup();
onBackPress(() => {
  if (shouldStopBack.value) {
    hidePopup();
    return true;
  }
});
</script>

API ​

FloatingPanelProps ​

属性描述类型默认值
root-class组件根元素类名string-
root-style组件根元素样式StyleValue-
height当前面板的显示高度number0
anchors设置自定义锚点, 单位 pxnumber[][100, uni.getWindowInfo().windowHeight * 0.6]
duration动画时长，单位毫秒number300
content-draggable允许拖拽内容容器booleantrue
safe-area-inset-bottom是否开启底部安全区适配booleantrue

FloatingPanelSlots ​

插槽描述属性
default自定义默认内容-

FloatingPanelEmits ​

事件描述类型
update:height面板显示高度改变时触发{value: number}
height-change面板显示高度改变且结束拖动后触发{value: number}

主题定制 ​

CSS 变量 ​

scss
page,
.sar-portal {
  --sar-floating-panel-z-index: 1000;
  --sar-floating-panel-bg: var(--sar-emphasis-bg);
  --sar-floating-panel-border-radius: var(--sar-rounded-xl);

  --sar-floating-panel-header-height: 64rpx;
  --sar-floating-panel-bar-width: 40rpx;
  --sar-floating-panel-bar-height: 6rpx;
  --sar-floating-panel-bar-color: var(--sar-tertiary-bg);
}

Released under the MIT License.

Copyright © 2023-present wuzhitao