BannerArc 底部圆弧

此组件底部圆弧效果

平台差异说明

APP	H5	微信小程序	支付宝小程序	QQ小程序	···
√	√	√	√	√	适配中

代码示例

部分功能示例，具体可参考示例程序以及文档API。

基础用法

通过 slot 传入内容，组件会自动居中显示

• 通过 height 属性设置组件高度
• 通过 bgColor 属性设置背景色

注意

此组件为绝对定位组件，请确保父元素有明确的高度，否则会导致组件无法正常显示，需要父元素增加 overflow: hidden 样式，否则会导致组件内容溢出。

<template>
    <view class="banner-arc">
        <fu-banner-arc height="100%"></fu-banner-arc>
    </view>
</template>

<style lang="csss" scoped>
    .banner-arc {
        position: relative;
        overflow: hidden;
        height: 200px;
    }
</style>

API

BannerArc Props

属性名	说明	类型	默认值	可选值
bgColor	自定义背景色	String	-	-
percent	圆弧元素宽度占banner宽度的百分比，用于调整弧度，最低值120	String｜Number	120	-
height	组件高度	String｜Number	150	-
zIndex	组件层级	Number	0	-