更新记录
svg,tabbar,动效,动效tabb(2021-11-24) 下载此版本
动效tabbar样式2 交流群:697867234
平台兼容性
HbuilderX/cli最低兼容版本 |
---|
3.2.0 |
uni-app
Vue2 | Vue3 |
---|---|
√ | ? |
app-vue | app-nvue | app-android | app-ios |
---|---|---|---|
? | ? | ? | ? |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | 钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
快应用-华为 | 快应用-联盟 |
---|---|
? | ? |
uni-app x
app-android | app-ios |
---|---|
? | ? |
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