Skip to content

BannerArc 横幅底部圆弧 ​

为横幅底部添加圆弧,并支持在横幅内放置自定义内容。

支持平台 ​

以下为官网文档所列的平台支持情况,具体功能及版本限制请参见本页的平台说明。

App-vueApp-nvue微信小程序支付宝小程序百度小程序字节小程序QQ小程序H5PC快手小程序钉钉小程序
✓✓✓✓✓✓✓✓✓✓✓

基础用法 ​

vue
<!-- 带圆弧的横幅 -->
<fui-banner-arc background="#465CFF" :height="400">
  <text>欢迎使用</text>
</fui-banner-arc>

属性 ​

属性类型说明官网默认值
heightNumber / String横幅高度,单位 rpx400
ratioNumber / String圆弧宽度与横幅宽度之比,越大弧度越平缓1.2
backgroundString背景色-
marginTopNumber / String上外边距,单位 rpx0
marginBottomNumber / String下外边距,单位 rpx0

事件 ​

事件说明回调参数
click点击横幅时触发{}

插槽 ​

插槽说明
default横幅内容

平台说明 ​

ratio 的最小值在 nvue 为 1.5,在其他平台为 1.2,低于最小值时按最小值计算。