更新记录

svg,tabbar,动效,动效tabb(2021-11-24)

动效tabbar样式2 交流群:697867234


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.2.0 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

由于项目中有时候要用到动效 Tabbar,原生的 Tabbar 可自定义性有局限性,稍微整理了一下,弄出一个组件。

H5 Demo:点击预览

提供了相关示例 Demo,可以自己在插件市场]导入示例项目
大家可以多多反馈,主要是实现动效所以Tabbar的其他功能并没有付出太多精力大家可以自行补全其他Tabbar功能
最好提供一下使用的什么端,数据结构及大概的代码,我好复现找问题,不要直接提怎么xxx报错了等没意义的问题,神仙也不知道你为啥报错了。 关于图标更换大家可以用figma绘制出图标后导出为svg文件,参考svg文档去使用

兼容性

nvue + 各平台小程序暂不支持

引入插件

推荐使用 easycom 引入

导入插件后再pages.json加上如下配置:

"easycom": {
      "autoscan": true,
      "custom": {
        "foo-bar": "@/components/fooBar/fooBar.vue",
        "home": "@/components/fooBar/home.vue",
        "cate": "@/components/fooBar/cate.vue",
        "shop": "@/components/fooBar/shop.vue",
        "user": "@/components/fooBar/user.vue"
      }
}

App.vue引入基础样式(注意style标签需声明scss属性支持)

/* App.vue */
<style lang="scss">
    @import "components/fooBar/fooBar.scss";
</style>

svg.js文件放入static

svg.js:点击预览 svg.js文档:点击预览

图片演示

图片演示

交流群

697867234

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问