集运-客户端主页教程

src/pages/cons/index.vue

@@ -222,6 +222,9 @@
       <!-- 签收图片 -->
       <sign-in-picture ref="popupImage"/>
 
+      <uni-fab ref="fab" :pattern="pattern" :content="content" horizontal="right" vertical="bottom"
+               direction="vertical" @fabClick="fabClick" @trigger="trigger"/>
+
     </view>
   </view>
 
@@ -253,6 +256,31 @@ export default {
       keyword: '',
     }
     return {
+      directionStr: '垂直',
+      horizontal: 'left',
+      vertical: 'bottom',
+      direction: 'horizontal',
+      pattern: {
+        color: '#7A7E83',
+        backgroundColor: '#fff',
+        selectedColor: '#007AFF',
+        buttonColor: '#007AFF',
+        iconColor: '#fff'
+      },
+      content: [{
+        iconPath: '/static/img/package_add.png',
+        selectedIconPath: '/static/img/package_add_active.png',
+        text: '预报',
+        active: false
+      },
+        {
+          iconPath: '/static/img/course.png',
+          selectedIconPath: '/static/img/course_active.png',
+          text: '教程',
+          active: false
+        },
+      ],
+
       // 查询参数
       queryParams: {...initQueryParams},
       initQueryParams,
@@ -350,6 +378,29 @@ export default {
       }
     },
 
+    /**
+     * 悬浮按钮点击事件
+     */
+    fabClick(){
+
+    },
+
+    /**
+     * 点击悬浮按钮内的图标
+     */
+    trigger(e){
+      this.content[e.index].active = !e.item.active
+      console.log(e.index)
+      switch (parseInt(e.index)){
+        case 0:
+          this.navigateTo('../cons/create');
+          break;
+        case 1:
+          this.navigateTo('../help/help');
+          break;
+      }
+    },
+
     /**
      * 获取列表数据
      */

src/uni_modules/uni-fab/changelog.md

+## 1.2.6（2024-10-12）
+- 修复 微信小程序中的getSystemInfo警告
+## 1.2.5（2023-03-29）
+- 新增 pattern.icon 属性，可自定义图标
+## 1.2.4（2022-09-07）
+小程序端由于 style 使用了对象导致报错，[详情](https://ask.dcloud.net.cn/question/152790?item_id=211778&rf=false)
+## 1.2.3（2022-09-05）
+- 修复 nvue 环境下，具有 tabBar 时，fab 组件下部位置无法正常获取 --window-bottom 的bug，详见：[https://ask.dcloud.net.cn/question/110638?notification_id=826310](https://ask.dcloud.net.cn/question/110638?notification_id=826310)
+## 1.2.2（2021-12-29）
+- 更新 组件依赖
+## 1.2.1（2021-11-19）
+- 修复 阴影颜色不正确的bug
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-fab](https://uniapp.dcloud.io/component/uniui/uni-fab)
+## 1.1.1（2021-11-09） 
+- 新增 提供组件设计资源，组件样式调整
+## 1.1.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.7（2021-05-12）
+- 新增 组件示例地址
+## 1.0.6（2021-02-05）
+- 调整为uni_modules目录规范
+- 优化 按钮背景色调整
+- 优化 兼容pc端

src/uni_modules/uni-fab/package.json

+{
+  "id": "uni-fab",
+  "displayName": "uni-fab 悬浮按钮",
+  "version": "1.2.6",
+  "description": "悬浮按钮 fab button ，点击可展开一个图标按钮菜单。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "按钮",
+    "悬浮按钮",
+    "fab"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": ["uni-scss","uni-icons"],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y",
+        "alipay": "n"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}

src/uni_modules/uni-fab/readme.md

+## Fab 悬浮按钮
+> **组件名：uni-fab**
+> 代码块： `uFab`
+
+
+点击可展开一个图形按钮菜单
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-fab)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
\ No newline at end of file