组件名:uni-fab
代码块:
uFab
<template>
<view>
<uni-fab
:pattern="pattern"
:content="content"
:horizontal="horizontal"
:vertical="vertical"
:direction="direction"
@trigger="trigger"
></uni-fab>
</view>
</template>
<template>
<view class="container">
<uni-card :is-shadow="false" is-full>
<text class="uni-h6">uni-ui 规范颜色色板,通过内置样式快速指定元素前景和背景色。</text>
</uni-card>
<uni-section title="基本功能" subTitle="点击按钮,切换 fab 不同状态" type="line">
<view class="warp">
<button class="button" type="primary" @click="switchBtn(0)">切换菜单方向({{ directionStr }})</button>
<button class="button" type="primary" @click="switchBtn('left', 'bottom')">左下角显示</button>
<button class="button" type="primary" @click="switchBtn('right', 'bottom')">右下角显示</button>
<button class="button" type="primary" @click="switchBtn('left', 'top')">左上角显示</button>
<button class="button" type="primary" @click="switchBtn('left', 'top')">左上角显示</button>
<button class="button" type="primary" @click="switchBtn('right', 'top')">右上角显示</button>
<button class="button" type="primary" @click="switchColor">修改颜色</button>
</view>
</uni-section>
<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
:direction="direction" @trigger="trigger" @fabClick="fabClick" />
</view>
</template>
点击可展开一个图形按钮菜单
在HbuildX中运行一切正常,但是运行到微信小程序模拟器和发布小程序后就不显示图标,显示
而且uniapp官方的HelloUniapp小程序也不显示图标,难道是有Bug?
几次查找,原来是uni-fab图标的图片应该放在uni-fab的static的目录下,而不是该程序的static目录下。
重新复制图标到Uni-fab的Static目录下,再运行、发布,就可以实现了。
是见证成果的时候了,请看
正常显示了!
威信搜索小程序:法务手册,查看实际运行效果!