声明,参考:https://ext.dcloud.net.cn/plugin?id=144

  • 在 template 中使用

  1. <template>
  2. <view>
  3. <uni-fab
  4. :pattern="pattern"
  5. :content="content"
  6. :horizontal="horizontal"
  7. :vertical="vertical"
  8. :direction="direction"
  9. @trigger="trigger"
  10. ></uni-fab>
  11. </view>
  12. </template>

  • 在 javascript 中使用
  1. <script>
  2. import uniFab from '@/components/uni-fab/uni-fab.vue';
  3. export default {
  4. data() {
  5. return {
  6. horizontal: 'left',
  7. vertical: 'top',
  8. direction: 'horizontal',
  9. pattern: {
  10. color: '#7A7E83',
  11. backgroundColor: '#fff',
  12. selectedColor: '#FF0000',
  13. buttonColor:"#007AFF",
  14. },
  15. content: [
  16. {
  17. iconPath: '/static/img/tabbar/guanzhu.png',
  18. selectedIconPath: '/static/img/tabbar/guanzhuactive.png',
  19. text: '组件',
  20. active: false
  21. },
  22. {
  23. iconPath: '/static/img/tabbar/home.png',
  24. selectedIconPath: '/static/img/tabbar/homeactive.png',
  25. text: 'API',
  26. active: false
  27. },
  28. {
  29. iconPath: '/static/img/tabbar/me.png',
  30. selectedIconPath: '/static/img/tabbar/meactive.png',
  31. text: '模版',
  32. active: false
  33. }
  34. ]
  35. }
  36. },
  37. methods: {
  38. trigger(e) {
  39. let other = this.content.map((d, i) => {
  40. d.active = i== e.index
  41. })
  42. uni.showToast({
  43. title:'选择了'+this.content[e.index].text
  44. })
  45. }
  46. },
  47. components: {
  48. uniFab
  49. }
  50. }
  51. </script>

  • 最后附上uni-fab.vue

  1. <template>
  2. <view>
  3. <view
  4. class="fab-box fab"
  5. :class="{
  6. leftBottom: leftBottom,
  7. rightBottom: rightBottom,
  8. leftTop: leftTop,
  9. rightTop: rightTop
  10. }"
  11. >
  12. <view
  13. class="fab-circle"
  14. :class="{
  15. left: horizontal === 'left' && direction === 'horizontal',
  16. top: vertical === 'top' && direction === 'vertical',
  17. bottom: vertical === 'bottom' && direction === 'vertical',
  18. right: horizontal === 'right' && direction === 'horizontal'
  19. }"
  20. :style="{ 'background-color': styles.buttonColor }"
  21. @click="open"
  22. >
  23. <text class="icon icon-jia" :class="{ active: showContent }"></text>
  24. </view>
  25. <view
  26. class="fab-content"
  27. :class="{
  28. left: horizontal === 'left',
  29. right: horizontal === 'right',
  30. flexDirection: direction === 'vertical',
  31. flexDirectionStart: flexDirectionStart,
  32. flexDirectionEnd: flexDirectionEnd
  33. }"
  34. :style="{ width: boxWidth, height: boxHeight, background: styles.backgroundColor }"
  35. >
  36. <view v-if="flexDirectionStart || horizontalLeft" class="fab-item first"></view>
  37. <view
  38. class="fab-item"
  39. v-for="(item, index) in content"
  40. :key="index"
  41. :class="{ active: showContent }"
  42. :style="{
  43. color: item.active ? styles.selectedColor : styles.color
  44. }"
  45. @click="taps(index, item)"
  46. >
  47. <image
  48. class="content-image"
  49. :src="item.active ? item.selectedIconPath : item.iconPath"
  50. mode=""
  51. ></image>
  52. <text class="text">{{ item.text }}</text>
  53. </view>
  54. <view v-if="flexDirectionEnd || horizontalRight" class="fab-item first"></view>
  55. </view>
  56. </view>
  57. </view>
  58. </template>
  59. <script>
  60. export default {
  61. props: {
  62. pattern: {
  63. type: Object,
  64. default: () => {
  65. return {};
  66. }
  67. },
  68. horizontal: {
  69. type: String,
  70. default: 'left'
  71. },
  72. vertical: {
  73. type: String,
  74. default: 'bottom'
  75. },
  76. direction: {
  77. type: String,
  78. default: 'horizontal'
  79. },
  80. content: {
  81. type: Array,
  82. default: () => {
  83. return [];
  84. }
  85. }
  86. },
  87. data() {
  88. return {
  89. fabShow: false,
  90. flug: true,
  91. showContent: false,
  92. styles: {
  93. color: '#3c3e49',
  94. selectedColor: '#007AFF',
  95. backgroundColor: '#fff',
  96. buttonColor: '#3c3e49'
  97. }
  98. };
  99. },
  100. created() {
  101. if (this.top === 0) {
  102. this.fabShow = true;
  103. }
  104. // 初始化样式
  105. this.styles = Object.assign({}, this.styles, this.pattern);
  106. },
  107. methods: {
  108. open() {
  109. this.showContent = !this.showContent;
  110. },
  111. /**
  112. * 按钮点击事件
  113. */
  114. taps(index, item) {
  115. this.$emit('trigger', {
  116. index,
  117. item
  118. });
  119. this.showContent = false;
  120. },
  121. /**
  122. * 获取 位置信息
  123. */
  124. getPosition(types, paramA, paramB) {
  125. if (types === 0) {
  126. return this.horizontal === paramA && this.vertical === paramB;
  127. } else if (types === 1) {
  128. return this.direction === paramA && this.vertical === paramB;
  129. } else if (types === 2) {
  130. return this.direction === paramA && this.horizontal === paramB;
  131. } else {
  132. return this.showContent && this.direction === paramA
  133. ? this.contentWidth
  134. : this.contentWidthMin;
  135. }
  136. }
  137. },
  138. watch: {
  139. pattern(newValue, oldValue) {
  140. console.log(JSON.stringify(newValue));
  141. this.styles = Object.assign({}, this.styles, newValue);
  142. }
  143. },
  144. computed: {
  145. contentWidth(e) {
  146. return uni.upx2px((this.content.length + 1) * 110 + 20) + 'px';
  147. },
  148. contentWidthMin() {
  149. return uni.upx2px(110) + 'px';
  150. },
  151. // 动态计算宽度
  152. boxWidth() {
  153. return this.getPosition(3, 'horizontal');
  154. },
  155. // 动态计算高度
  156. boxHeight() {
  157. return this.getPosition(3, 'vertical');
  158. },
  159. // 计算左下位置
  160. leftBottom() {
  161. return this.getPosition(0, 'left', 'bottom');
  162. },
  163. // 计算右下位置
  164. rightBottom() {
  165. return this.getPosition(0, 'right', 'bottom');
  166. },
  167. // 计算左上位置
  168. leftTop() {
  169. return this.getPosition(0, 'left', 'top');
  170. },
  171. rightTop() {
  172. return this.getPosition(0, 'right', 'top');
  173. },
  174. flexDirectionStart() {
  175. return this.getPosition(1, 'vertical', 'top');
  176. },
  177. flexDirectionEnd() {
  178. return this.getPosition(1, 'vertical', 'bottom');
  179. },
  180. horizontalLeft() {
  181. return this.getPosition(2, 'horizontal', 'left');
  182. },
  183. horizontalRight() {
  184. return this.getPosition(2, 'horizontal', 'right');
  185. }
  186. }
  187. };
  188. </script>
  189. <style scoped>
  190. .fab-box {
  191. position: fixed;
  192. display: flex;
  193. justify-content: center;
  194. align-items: center;
  195. z-index: 2;
  196. }
  197. .fab-box.top {
  198. width: 60upx;
  199. height: 60upx;
  200. right: 30upx;
  201. bottom: 60upx;
  202. border: 1px #5989b9 solid;
  203. background: #6699cc;
  204. border-radius: 10upx;
  205. color: #fff;
  206. transition: all 0.3;
  207. opacity: 0;
  208. }
  209. .fab-box.active {
  210. opacity: 1;
  211. }
  212. .fab-box.fab {
  213. z-index: 10;
  214. }
  215. .fab-box.fab.leftBottom {
  216. left: 30upx;
  217. bottom: 60upx;
  218. }
  219. .fab-box.fab.leftTop {
  220. left: 30upx;
  221. top: 80upx;
  222. /* #ifdef H5 */
  223. top: calc(80upx + var(--window-top));
  224. /* #endif */
  225. }
  226. .fab-box.fab.rightBottom {
  227. right: 30upx;
  228. bottom: 60upx;
  229. }
  230. .fab-box.fab.rightTop {
  231. right: 30upx;
  232. top: 80upx;
  233. /* #ifdef H5 */
  234. top: calc(80upx + var(--window-top));
  235. /* #endif */
  236. }
  237. .fab-circle {
  238. display: flex;
  239. justify-content: center;
  240. align-items: center;
  241. position: absolute;
  242. width: 110upx;
  243. height: 110upx;
  244. background: #3c3e49;
  245. /* background: #5989b9; */
  246. border-radius: 50%;
  247. box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
  248. z-index: 11;
  249. }
  250. .fab-circle.left {
  251. left: 0;
  252. }
  253. .fab-circle.right {
  254. right: 0;
  255. }
  256. .fab-circle.top {
  257. top: 0;
  258. }
  259. .fab-circle.bottom {
  260. bottom: 0;
  261. }
  262. .fab-circle .icon-jia {
  263. color: #ffffff;
  264. font-size: 50upx;
  265. transition: all 0.3s;
  266. }
  267. .fab-circle .icon-jia.active {
  268. transform: rotate(135deg);
  269. }
  270. .fab-content {
  271. background: #6699cc;
  272. box-sizing: border-box;
  273. display: flex;
  274. border-radius: 100upx;
  275. overflow: hidden;
  276. box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
  277. transition: all 0.2s;
  278. width: 110upx;
  279. }
  280. .fab-content.left {
  281. justify-content: flex-start;
  282. }
  283. .fab-content.right {
  284. justify-content: flex-end;
  285. }
  286. .fab-content.flexDirection {
  287. flex-direction: column;
  288. justify-content: flex-end;
  289. }
  290. .fab-content.flexDirectionStart {
  291. flex-direction: column;
  292. justify-content: flex-start;
  293. }
  294. .fab-content.flexDirectionEnd {
  295. flex-direction: column;
  296. justify-content: flex-end;
  297. }
  298. .fab-content .fab-item {
  299. display: flex;
  300. flex-direction: column;
  301. justify-content: center;
  302. align-items: center;
  303. width: 110upx;
  304. height: 110upx;
  305. font-size: 24upx;
  306. color: #fff;
  307. opacity: 0;
  308. transition: opacity 0.2s;
  309. }
  310. .fab-content .fab-item.active {
  311. opacity: 1;
  312. }
  313. .fab-content .fab-item .content-image {
  314. width: 50upx;
  315. height: 50upx;
  316. margin-bottom: 5upx;
  317. }
  318. .fab-content .fab-item.first {
  319. width: 110upx;
  320. }
  321. @font-face {
  322. font-family: 'iconfont';
  323. src: url('https://at.alicdn.com/t/font_1028200_xhbo4rn58rp.ttf?t=1548214263520')
  324. format('truetype');
  325. }
  326. .icon {
  327. font-family: 'iconfont' !important;
  328. font-size: 16px;
  329. font-style: normal;
  330. -webkit-font-smoothing: antialiased;
  331. -moz-osx-font-smoothing: grayscale;
  332. }
  333. .icon-jia:before {
  334. content: '\e630';
  335. }
  336. .icon-arrow-up:before {
  337. content: '\e603';
  338. }
  339. </style>

Fab 悬浮按钮的更多相关文章

  1. FloatingActionButton FAB 悬浮按钮

    FloatingActionButton简称FAB,这是一种比较美观的按钮: 1.使用前: FAB代表一个App或一个页面中最主要的操作,如果一个App的每个页面都有FAB,则通常表示该App最主要的 ...

  2. Android FloatingActionButton(FAB) 悬浮按钮

    FloatingActionButton 悬浮按钮                                                                            ...

  3. Android 5.0新控件——FloatingActionButton(悬浮按钮)

    Android 5.0新控件--FloatingActionButton(悬浮按钮) FloatingActionButton是5.0以后的新控件,一个悬浮按钮,之所以叫做悬浮按钮,主要是因为自带阴影 ...

  4. FloatingActionButtonDemo【悬浮按钮的使用,顺带snackBar的使用】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 FloatingActionButton简称FAB. 一. 对于App或某个页面中是否要使用FloatingActionButton ...

  5. FloatingActionButton(悬浮按钮)使用学习<一>

      FloatingActionButton简称FAB.   一. 对于App或某个页面中是否要使用FloatingActionButton必要性:     FAB代表一个App或一个页面中最主要的操 ...

  6. android ——悬浮按钮及可交互提示

    一.悬浮按钮 FloatingActionButton是Design Support中的一个控件,它会默认colorAccent作为按钮的颜色,还可以给按钮一个图标. 这是没有图标的,这是有图标的. ...

  7. android悬浮按钮(Floating action button)的两种实现方法

    原文: http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1028/1857.html 最近android中有很多新的设计规范被引入 ...

  8. 在TableView上添加悬浮按钮

    如果直接在TableVIewController上贴Button的话会导致这个会随之滚动,下面解决在TableView上实现位置固定悬浮按钮的两种方法: 1.在view上贴tableView,然后将悬 ...

  9. Android用悬浮按钮实现翻页效果

    今天给大家分享下自己用悬浮按钮点击实现翻页效果的例子. 首先,一个按钮要实现悬浮,就要用到系统顶级窗口相关的WindowManager,WindowManager.LayoutParams.那么在An ...

随机推荐

  1. STC8单片机波特率115200时乱码解决

    最近开发一个STC8单片机(STC8H3K32S2)项目,需要通过传口与蓝牙模块通讯,波特率高于57600后STC接收时出现乱码,但发送时正常.当将stc8串口和蓝牙串口分别接USB转串口模块通讯正常 ...

  2. Wordpress Calendar Event Multi View < 1.4.01 反射型xss漏洞(CVE-2021-24498)

    简介 WordPress是Wordpress基金会的一套使用PHP语言开发的博客平台.该平台支持在PHP和MySQL的服务器上架设个人博客网站.WordPress 插件是WordPress开源的一个应 ...

  3. mysql 完整备份和恢复

    mysql 完整备份和恢复   一.MySQL完整备份操作 1.直接打包数据库文件夹 创建数据库auth: MariaDB [(none)]> create database auth;Quer ...

  4. 『现学现忘』Docker基础 — 27、Docker镜像的commit操作

    目录 1.commit命令作用 2.commit命令说明 3.示例演示 1.commit命令作用 在运行的容器中,并在镜像的基础上做了一些修改,我们希望保存起来,封装成一个新的镜像,方便我们以后使用, ...

  5. SpringBoot 中实现跨域的几种方式

    一.为什么会出现跨域问题 出于浏览器的同源策略限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响. ...

  6. python3判断一个数是否为素数

    while True: num = int(input('请输入一个数:')) for i in range(2,num):#判断在num之前的数能不能把num整除 if(num%i == 0): p ...

  7. Arcmap软件报错:This application cannot run under a virtual machine arcmapr, 但是你并没有使用虚拟机

    在任务栏搜索"启用或关闭 windows 功能",取消 "适用于 Linux 的 Windows 子系统" (有可能还需要 取消 "虚拟机平台&quo ...

  8. 6月11日 python复习 mysql

    01. 列举常见的关系型数据库和非关系型都有那些? 1.关系型数据库通过外键关联来建立表与表之间的关系,---------常见的有:SQLite.Oracle.mysql 2.非关系型数据库通常指数据 ...

  9. 如何绑定msix中断 cpu亲和性

    echo X > /proc/irq/中断号/smp_affinity /proc/irq目录下面会为每个注册的irq创建一个以irq编号为名字的子目录,每个子目录下分别有以下条目:1.smp_ ...

  10. 有关电控制图软件EPLAN的安装,下面有破解版本2.7

    前段时间刚刚接触这一块,就安装个软件老是出问题,所以我通过自己的努力学会啦,来给正要学习EPLAN的同学发福利啦 15:07:48 安装包发放在百度网盘来自取呀  建议安装我勾选的这个哦 链接:htt ...