From eea5ef4b28471d8141f75280b8f4f199fdbceafd Mon Sep 17 00:00:00 2001 From: Mrxtyyp <1126084777@qq.com> Date: Tue, 30 Jul 2024 10:15:19 +0800 Subject: [PATCH] feat: Requirements changed --- colorui/main.css | 35 +- components/CTabbar.vue | 287 +++++ .../common-card/horizontal-name-card.vue | 10 +- components/vertify/vertify-phone.vue | 2 +- manifest.json | 3 +- pages.json | 78 +- pages/index/components/valid.vue | 169 +++ pages/index/home.vue | 848 +++++++------- pages/index/msg-home.vue | 32 +- pages/index/my-home.vue | 35 +- pages/index/worker-home.vue | 1036 +++++++++-------- pages/product/product-detail.vue | 10 +- pages/product/shop-detail.vue | 9 +- uni_modules/m-tabbar/changelog.md | 76 ++ .../m-tabbar/components/m-tabbar/m-tabbar.vue | 525 +++++++++ uni_modules/m-tabbar/package.json | 81 ++ uni_modules/m-tabbar/readme.md | 312 +++++ 17 files changed, 2623 insertions(+), 925 deletions(-) create mode 100644 components/CTabbar.vue create mode 100644 pages/index/components/valid.vue create mode 100644 uni_modules/m-tabbar/changelog.md create mode 100644 uni_modules/m-tabbar/components/m-tabbar/m-tabbar.vue create mode 100644 uni_modules/m-tabbar/package.json create mode 100644 uni_modules/m-tabbar/readme.md diff --git a/colorui/main.css b/colorui/main.css index 93949fc..3ed9937 100644 --- a/colorui/main.css +++ b/colorui/main.css @@ -619,6 +619,10 @@ radio.white.checked .uni-radio-input { /* ================== 按钮 ==================== */ + + .cu-tab-icon { + font-size: 28upx; + } .cu-btn { position: relative; @@ -1701,6 +1705,14 @@ button.cuIcon.lg { background-color: inherit; overflow: initial; } +/* .cu-bar.tabbar { + flex-direction: column; +} */ + +.cu-bar.tabbar .title { + color: #C8C9CC; + font-size: 24upx; +} .cu-bar.tabbar.shop .action { width: 140upx; @@ -1710,20 +1722,22 @@ button.cuIcon.lg { .cu-bar.tabbar .action.add-action { position: relative; z-index: 2; - padding-top: 50upx; + color: #C8C9CC; + margin-top: -22upx; + font-size: 24upx; +} + +.cu-bar.tabbar .action.add-action .bg-main-color { + margin-bottom: 6upx; } .cu-bar.tabbar .action.add-action [class*="cuIcon-"] { - position: absolute; + position: relative; width: 70upx; - z-index: 2; height: 70upx; border-radius: 50%; line-height: 70upx; font-size: 50upx; - top: -35upx; - left: 0; - right: 0; margin: auto; padding: 0; } @@ -1733,17 +1747,18 @@ button.cuIcon.lg { position: absolute; width: 100upx; height: 100upx; - top: -50upx; - left: 0; + top: -15upx; + left: -15rpx; right: 0; margin: auto; box-shadow: 0 -3upx 8upx rgba(0, 0, 0, 0.08); border-radius: 50upx; background-color: inherit; z-index: 0; + border-bottom: transparent; } -.cu-bar.tabbar .action.add-action::before { +/* .cu-bar.tabbar .action.add-action::before { content: ""; position: absolute; width: 100upx; @@ -1754,7 +1769,7 @@ button.cuIcon.lg { margin: auto; background-color: inherit; z-index: 1; -} +} */ .cu-bar.tabbar .btn-group { flex: 1; diff --git a/components/CTabbar.vue b/components/CTabbar.vue new file mode 100644 index 0000000..28d3c10 --- /dev/null +++ b/components/CTabbar.vue @@ -0,0 +1,287 @@ + + + + + \ No newline at end of file diff --git a/components/common-card/horizontal-name-card.vue b/components/common-card/horizontal-name-card.vue index 036d416..b86a676 100644 --- a/components/common-card/horizontal-name-card.vue +++ b/components/common-card/horizontal-name-card.vue @@ -3,7 +3,7 @@ - + @@ -69,6 +69,14 @@ return { } + }, + methods: { + defaultHead(url) { + if(url === 'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132') { + return 'http://gqz.opsoul.com/2741722238771_.pic.jpg' + } + return url + } } } diff --git a/components/vertify/vertify-phone.vue b/components/vertify/vertify-phone.vue index 3b24181..cf4e16f 100644 --- a/components/vertify/vertify-phone.vue +++ b/components/vertify/vertify-phone.vue @@ -4,7 +4,7 @@ - 授予小程序绑定微信手机号码的权限 + 授予小程序绑定手机号码的权限 拒绝授权 diff --git a/manifest.json b/manifest.json index ad9eade..0fc0192 100644 --- a/manifest.json +++ b/manifest.json @@ -1,6 +1,6 @@ { "name" : "dingdong-mall", - "appid" : "", + "appid" : "__UNI__5E048DE", "description" : "", "versionName" : "1.0.0", "versionCode" : "100", @@ -48,7 +48,6 @@ "quickapp" : {}, /* 快应用特有相关 */ "mp-weixin" : { - /* 小程序特有相关 */ "appid" : "wxc39c2af3ea24cd37", "setting" : { "urlCheck" : false, diff --git a/pages.json b/pages.json index b7f2781..e41a28e 100644 --- a/pages.json +++ b/pages.json @@ -1,6 +1,15 @@ { "pages": [{ - "path": "pages/index/index" + "path": "pages/index/home" + }, { + + "path": "pages/index/worker-home" + }, { + + "path": "pages/index/msg-home" + }, { + + "path": "pages/index/my-home" }], "subPackages": [{ "root": "pages/order/", @@ -17,15 +26,15 @@ "path": "product-pick" }, { "path": "shop-detail" - }, { - "path": "product-category" - }, { - "path": "filtered-products" + }, { + "path": "product-category" + }, { + "path": "filtered-products" }] }, { "root": "pages/my/", - "pages": [{ - "path": "edit-user-basic-info" + "pages": [{ + "path": "edit-user-basic-info" }, { "path": "my-order" }, { @@ -46,26 +55,49 @@ "path": "my-team-member" }, { "path": "serv-detail" - }, { - "path": "statement-desc" - }, { - "path": "withdraw" - }, { - "path": "b-account-bind" - }, { - "path": "my-money-bag" - }, { - "path": "member-approval" + }, { + "path": "statement-desc" + }, { + "path": "withdraw" + }, { + "path": "b-account-bind" + }, { + "path": "my-money-bag" + }, { + "path": "member-approval" + }] + }, { + "root": "pages/publish/", + "pages": [{ + "path": "publish-task" }] - }, { - "root":"pages/publish/", - "pages": [{ - "path": "publish-task" - }] }], // "pages": [{ // "path": "pages/my/serv-detail" // }], + "tabBar": { + "color": "#7A7E83", + "selectedColor": "#3cc51f", + "borderStyle": "black", + "backgroundColor": "#ffffff", + "list": [{ + "pagePath": "pages/index/home", + "visible": "false" + }, + { + "pagePath": "pages/index/worker-home", + "visible": "false" + }, + { + "pagePath": "pages/index/msg-home", + "visible": "false" + }, + { + "pagePath": "pages/index/my-home", + "visible": "false" + } + ] + }, "globalStyle": { "navigationStyle": "custom", "navigationBarTextStyle": "black" @@ -76,4 +108,4 @@ // "background": "#efeff4" // } } -} +} \ No newline at end of file diff --git a/pages/index/components/valid.vue b/pages/index/components/valid.vue new file mode 100644 index 0000000..30ea988 --- /dev/null +++ b/pages/index/components/valid.vue @@ -0,0 +1,169 @@ + + + + + diff --git a/pages/index/home.vue b/pages/index/home.vue index 21a5ac3..586b8b8 100644 --- a/pages/index/home.vue +++ b/pages/index/home.vue @@ -1,171 +1,195 @@ - + + .waterfall-grid { + /* column-count: 2; + column-gap: 15rpx; */ + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } + + .waterfall-grid-item { + /* break-inside: avoid; + margin-bottom: 15rpx; */ + width: 49%; + margin-bottom: 15rpx; + } + \ No newline at end of file diff --git a/pages/index/msg-home.vue b/pages/index/msg-home.vue index 5ed8648..abf2c9d 100644 --- a/pages/index/msg-home.vue +++ b/pages/index/msg-home.vue @@ -1,4 +1,5 @@ @@ -544,14 +614,14 @@ height: 6px; border-radius: 50%; margin-top: 50%; - } - - .text-beside-avatar { - width: 75%; - } - - .certern-height { - max-height: 200rpx; - overflow: hidden; } - + + .text-beside-avatar { + width: 75%; + } + + .certern-height { + max-height: 200rpx; + overflow: hidden; + } + \ No newline at end of file diff --git a/pages/product/product-detail.vue b/pages/product/product-detail.vue index bd39229..b5326aa 100644 --- a/pages/product/product-detail.vue +++ b/pages/product/product-detail.vue @@ -179,7 +179,7 @@ - + {{shopInfo.name}} @@ -196,7 +196,7 @@ - + 首页 @@ -443,6 +443,12 @@ uni.navigateTo({ url: '/pages/index/index' }); + }, + defaultHead(url) { + if(url === 'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132') { + return 'http://gqz.opsoul.com/2741722238771_.pic.jpg' + } + return url } } } diff --git a/pages/product/shop-detail.vue b/pages/product/shop-detail.vue index 32924d8..856c8c4 100644 --- a/pages/product/shop-detail.vue +++ b/pages/product/shop-detail.vue @@ -9,7 +9,7 @@ + :style="'background-image:url(' + defaultHead(shopInfo.workerLogoUrl) + '); width: 130rpx; height: 130rpx;'"> {{shopInfo.name}} @@ -286,6 +286,13 @@ }, showAllArea(index) { this.isShowAllAreaCurCity = !this.isShowAllAreaCurCity; + }, + + defaultHead(url) { + if(url === 'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132') { + return 'http://gqz.opsoul.com/2741722238771_.pic.jpg' + } + return url } } } diff --git a/uni_modules/m-tabbar/changelog.md b/uni_modules/m-tabbar/changelog.md new file mode 100644 index 0000000..8018b40 --- /dev/null +++ b/uni_modules/m-tabbar/changelog.md @@ -0,0 +1,76 @@ +## 2.0.0(2023-11-14) +1、新增切换拦截返回当前点击index +2、新增自动读取主页面配置功能 +3、优化部分代码结构实现 +注意:代码重构优化,2.0.0版本不支持老版本兼容 +## 1.3.3(2023-02-27) +修复openType类型为navigateTo时,页面返回,重新点击不响应问题 +## 1.3.2(2023-02-27) +修改占位空间点击事件遮挡问题 +## 1.3.1(2023-02-27) +1、新增页面打开方式,可以自定义每个tabbarItem的点击打开方式 +2、新增tabbarHeight参数,方便你直接使用参数控制tabbar高度 +## 1.3.0(2023-02-21) +新增ref方法若干,优化使用说明文档 +## 1.2.9(2023-02-21) +修改safe计算,使用原生css,抛弃原始计算耗时能力 +## 1.2.8(2023-02-20) +修正文档使用说明 +## 1.2.7(2023-02-20) +1、新增角标显示 +2、新增setTabBarBadge,reLoad方法 +## 1.2.6(2023-02-13) +修复判断safebottom底部安全距离数值写死问题 +## 1.2.5(2023-01-12) +1、修复默认初始高度闪烁问题,不在使用计算,直接默认 +2、修复上个版本遗留current选中问题 +3、修复safeBottom底部判断错误问题 +4、更新使用说明文档 +## 1.2.4(2023-01-09) +新增文档说明,增加示例项目页面 +## 1.2.3(2022-12-14) +修复外部不跳转页面修改current,组件不响应bug +## 1.2.2(2022-12-14) +新增click事件,click事件会优先于任何事件 +## 1.2.1(2022-12-09) +修改文档使用说明,路由拦截有平台兼容性,暂时无法解决,平台原生不支持 +## 1.2.0(2022-12-09) +新增插槽,可以自定义凸起导航,优化文档使用说明 +## 1.1.9(2022-12-06) +修复iconPath图片路径为网络路径判断错误问题 +## 1.1.7(2022-12-01) +优化部分机器计算错误问题 +## 1.1.6(2022-12-01) +修改高度计算错误问题 +## 1.1.5(2022-12-01) +修复各别设备上高度计算有误问题 +## 1.1.4(2022-11-25) +修复vue2版本在微信小程序上不支持:style传入参数bug,优化参数错误逻辑 +## 1.1.3(2022-11-24) +修复native模式borderStyle样式丢失问题 +## 1.1.2(2022-11-24) +修改描述文档说明,修改插件描述信息 +## 1.1.1(2022-11-24) +优化使用说明文档 +## 1.1.0(2022-11-24) +极度简化native模式,页面只需要引入组件即可,任何操作都不需要 +## 1.0.9(2022-11-24) +修复native模式下,fill忘记计算高度. +## 1.0.8(2022-11-24) +优化native模式,简化参数数量,使用更简单 +## 1.0.7(2022-11-24) +新增native配置,可以兼容原生tabbar,新增beforeChange,可自行根据要求自己兼容路由守卫 +## 1.0.6(2022-11-23) +修改文档描述错误 +## 1.0.5(2022-11-23) +修复fill高度遗漏安全距离问题,文档使用说明优化更新 +## 1.0.4(2022-11-23) +优化配置选项,提取当前选中项,新增fixed配置 +## 1.0.3(2022-11-14) +添加上阴影效果,修复由于去除了上线条,造成如果内容如果是白色,tabbar会和内容高度重合的问题 +## 1.0.2(2022-11-14) +修改说明文档,更加详细备注说明 +## 1.0.1(2022-11-14) +新增当前选中项class名,方便用户直接样式覆盖 +## 1.0.0(2022-11-14) +第一个自定义tabbar版本 diff --git a/uni_modules/m-tabbar/components/m-tabbar/m-tabbar.vue b/uni_modules/m-tabbar/components/m-tabbar/m-tabbar.vue new file mode 100644 index 0000000..e346a4b --- /dev/null +++ b/uni_modules/m-tabbar/components/m-tabbar/m-tabbar.vue @@ -0,0 +1,525 @@ + + + + + \ No newline at end of file diff --git a/uni_modules/m-tabbar/package.json b/uni_modules/m-tabbar/package.json new file mode 100644 index 0000000..aef2e35 --- /dev/null +++ b/uni_modules/m-tabbar/package.json @@ -0,0 +1,81 @@ +{ + "id": "m-tabbar", + "displayName": "自定义tabbar、tabbar路由守卫、零配置tabbar、凸起导航", + "version": "2.0.0", + "description": "自定义tabbar,超高还原原生配置模式,一行代码自定义导航,自带tabbar路由守卫功能", + "keywords": [ + "自定义tabbar,tabbar,自定义标签栏,tabbar路由守卫,零配置tabbar,路由守卫、凸起导航" +], + "repository": "", + "engines": { + "HBuilderX": "^3.5.4" + }, + "dcloudext": { + "type": "component-vue", + "sale": { + "regular": { + "price": "0.00" + }, + "sourcecode": { + "price": "0.00" + } + }, + "contact": { + "qq": "" + }, + "declaration": { + "ads": "无", + "data": "无", + "permissions": "无" + }, + "npmurl": "" + }, + "uni_modules": { + "dependencies": [], + "encrypt": [], + "platforms": { + "cloud": { + "tcb": "y", + "aliyun": "y" + }, + "client": { + "Vue": { + "vue2": "y", + "vue3": "y" + }, + "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", + "钉钉": "y", + "快手": "y", + "飞书": "y", + "京东": "y" + }, + "快应用": { + "华为": "y", + "联盟": "y" + } + } + } + } +} \ No newline at end of file diff --git a/uni_modules/m-tabbar/readme.md b/uni_modules/m-tabbar/readme.md new file mode 100644 index 0000000..feb8545 --- /dev/null +++ b/uni_modules/m-tabbar/readme.md @@ -0,0 +1,312 @@ +# m-tabbar自定义 + + +## 使用说明,注意事项(必看) + +# 我配套上传了一个案例包,强烈建议下载阅读体验使用 + +--- + +> 1、自定义tabbar的情况下,不建议在一个页面内通过几个组件,用v-if切换去模拟各个页面,会存在各种不可控bug + +> 闪烁的话,可以使用一个页面,多个组件,如果是`if切换组件`的话,就是一个页面控制多个组件显示隐藏来实现。 如果组件封装的有问题,会出现组件之间的协调问题,请看情况使用。 还有一些原生的交互没有办法达到预期,会影响到原生体验。 比如下拉刷新,滚动加载更多,切换tabbar后滚动位置不能固定等 + +>2、在pages.json中正常定义tabbar配置和字段,使用`native`模式,组件会自动加载pages.json配置项,并自动判断当前选中项,并自动隐藏原生的tabbar, 但是有个闪烁问题,暂时无解,如果你有好的方案,欢迎指正 + +> 3、如果出现tabbar不显示,但是控制台无任何报错信息,应该就是样式布局影响了,请自行排查 + +> 4、因为是自定义导航,所以原生方法是不支持的,只能通过 ref 可以获取到 tabbar 实例并调用插件的实例方法,详细请看页面最下方 + + +--- +# 快速使用 + +## 方式一、Native模式使用 + +``` +// native模式,无需配置其他项 + +``` +在各个tabbar页面引入tabbar组件,传入属性`native`,`native`模式下无需任何配置 + +组件会默认自动通过`uni.hideTabBar()`隐藏系统tabbar + + +## 方式二、页面使用(current默认从0开始)(强烈推荐) + +``` +// 普通页面模式 + +``` + +配置选项和`uniapp`的配置完全相同,直接复制过来, 默认传入`pagePath`后,直接使用`reLaunch`跳转 +插件支持扩展`openType`参数,用户可根据自己情况自行扩展页面打开方式,详细看下方配置 + +> 闪烁的话,可以使用一个页面,多个组件,如果是`if切换组件`的话,就是一个页面控制多个组件显示隐藏来实现。 如果组件封装的有问题,会出现组件之间的协调问题,请看情况使用。 还有一些原生的交互没有办法达到预期,会影响到原生体验。 比如下拉刷新,滚动加载更多,切换tabbar后滚动位置不能固定等 + +### 1、提取tabbar配置(2.0.0版本支持自动读取配置,主页面配置,内页可以不配置) + +新建文件config/tabbar.js(默认你有config目录,根据自己情况而定) +``` +export default { + color: "#161616", + selectedColor: "#161616", + borderStyle: "black", + backgroundColor: "#ffffff", + list: [{ + pagePath: "/pages/index/index", + iconPath: "/static/tabbar/index.png", + selectedIconPath: "/static/tabbar/index_active.png", + text: "首页", + openType: 'navigate', //新版本新增,页面被打开方式,默认为reLaunch + dot: 1 //新版本新增参数,详细看页面最下方使用说明 + }, { + pagePath: "/pages/shop/index", + iconPath: "/static/tabbar/shop.png", + selectedIconPath: "/static/tabbar/shop_active.png", + text: "门店" + }, { + pagePath: "/pages/my/index", + iconPath: "/static/tabbar/my.png", + selectedIconPath: "/static/tabbar/my_active.png", + text: "我的" + }] +} +``` + +### 2、引入tabbar (2.0.0版本支持自动读取配置,主页面配置,内页可以不引入) +#### VUE2引入 +``` +import TabbarConfig from '@/config/tabbar.js' +export default { + data(){ + return { + tabbar: TabbarConfig + } + }, + onLoad(){ + // 没有开启native模式下,使用reLaunch跳转,会存在首页标志,需要隐藏 + #ifdef MP-JD || MP-WEIXIN + uni.hideHomeButton() + #endif + } +} +``` + +#### VUE3 setup引入 +``` +import TabbarConfig from '@/config/tabbar.js' +import { reactive } from 'vue' + +// 没有开启native模式下,使用reLaunch跳转,会存在首页标志,需要隐藏 +#ifdef MP-JD || MP-WEIXIN +uni.hideHomeButton() +#endif + +const tabbar = reactive(TabbarConfig) +``` + +### 3、页面使用 +``` + +``` + +## 高级用法(beforeChange)(路由守卫) + +有些特殊需求,我们在点击一个tabbar其他一项的时候,可能需要判断权限是否可以进入,那么我们在切换前做一下路由拦截`beforeChange`,如果达到自己的预期,就进行跳转 + +> uniapp 微信小程序不支持$listeners,只能使用prop方式传入, 部分平台不支持prop传入方法,有平台限制,详细请看(问题解答)[https://ask.dcloud.net.cn/question/70659] + +### 页面使用传入beforeChange + +``` +// native模式,无需传入 fixed fill + + +// 普通页面模式 + +``` + +### 进行事件判断监听 + +函数必选参数 next,当判断逻辑执行完毕后,满足条件的情况下执行 `next()` + +``` +methods: { + onBeforeChange(next, index){ + //index为当前点击的是第几项,0开始 + console.log('before page2 switch') + setTimeout(()=>{ + console.log('switch page2 end') + next() + }, 1000) + } +} +``` + +## 自定义凸起导航(插槽使用) + +``` + + + + +``` + +### 属性说明(Native模式) + +| 属性名 | 类型 | 默认值 | 必填 | 说明 | +| ------------ | ------------- | ------ | ---- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| zIndex | Number,String | 999 | 否 | 当前处于z-index层级 | +| native | Boolean | false | 否 | native模式,当前页面是系统原生tabbar页面(pages.json里面配置了tabBar) | +| beforeChange | Function | null | 否 | 导航切换前事件hooks,用于判断点击tabbar的时候,可以先执行自己定义的事件,达到预期后在跳转(类似router的路由守卫),方法需要调用next参数回调,部分平台不支持,存在兼容性 | +| tabbarHeight | Number,String | 100 | 否 | 默认tabbar高度,有些时候你可能想控制tabbar高度(没啥用,如果非要更改,布局有影响,请使用样式覆盖) | +| name | string | custom | 否 | 用于内部调用页面时,自动读取前一个页面的配置,无需二次配置 | + +### 属性说明(普通模式) + +| 属性名 | 类型 | 默认值 | 必填 | 说明 | +| ------------ | ------------- | ------ | ---- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| current | Number,String | 0 | 是 | 默认选中第几项,0开始 | +| tabbar | Object | {} | 是 | tabbar配置项(新增dot参数,详细看下方使用说明) | +| fixed | Boolean | false | 否 | 是否定位在底部 | +| fill | Boolean | false | 否 | 是否填充底部高度(如果开启fixed后,会出现tabbar遮盖内容问题,开启此属性,会自动填充高度,可单独使用) | +| safeBottom | Boolean | true | 否 | 是否自动规避iphoneX\XR等底部安全距离 | +| zIndex | Number,String | 999 | 否 | 当前处于z-index层级 | +| beforeChange | Function | null | 否 | 导航切换前事件hooks,用于判断点击tabbar的时候,可以先执行自己定义的事件,达到预期后在跳转(类似router的路由守卫),方法需要调用next参数回调,部分平台不支持,存在兼容性 | +| tabbarHeight | Number,String | 100 | 否 | 默认tabbar高度,有些时候你可能想控制tabbar高度(没啥用,如果非要更改,布局有影响,请使用样式覆盖) | +| name | string | custom | 否 | 用于内部调用页面时,自动读取前一个页面的配置,无需二次配置 | + +### openType对应值(默认reLaunch跳转) + +| 方法名 | 返回值说明 | +| ------- | ------- | +| navigate | [对应navigateTo](https://uniapp.dcloud.io/api/router?id=navigateto) | +| redirect | [对应redirectTo](https://uniapp.dcloud.io/api/router?id=redirectto) | +| reLaunch | [对应reLaunch](https://uniapp.dcloud.io/api/router?id=relaunch) | +| switchTab | [对应switchTab](https://uniapp.dcloud.io/api/router?id=switchtab) 注意此方法需要你有原生tabbar,比如内页使用了自定义导航,想回tabbar的指定页面 | +| navigateBack | [对应navigateBack](https://uniapp.dcloud.io/api/router?id=navigateback) 只能后退一步 | + +### 方法说明 + +| 方法名 | 返回值说明 | +| ------- | ------- | +| click | 当前选中index,无论什么情况下都会先触发click事件,方便自由定制更多方法 | +| change | 当前选中index(beforeChange会在change之前执行,只有执行next才会返回) | + +### 插槽 (注意Vue3存在跨断不兼容问题) + +| 插槽名 | 返回值说明 | +| ------- | ------- | +| tabbar_index_{index} | 插槽名字为tabbar_index_你要变化的index, 可以做到任意控制自己的导航,比如中心凸起,比如你想让第一个变化,index就是0,比如你tabbarList里面有5个item,你想让中间的凸起,那么index就是2,取下标 | + +### 方法 (通过 ref 可以获取到 tabbar 实例并调用实例方法) + +> 注意,由于是使用了自定义,所以原生的方法是不能使用的,只能通过 ref 可以获取到 tabbar 实例并调用实例方法,目前只有下面4个方法,而且方法是没有`success,fail,complete`回掉的,考虑到跨平台型,如果原生方法有平台差异,插件也是不考虑支持的 + +| 事件名 | 参数 | 参数说明| +| ------- | ------- | ------- | +| setTabBarBadge | object | [为 tabBar 某一项的右上角添加文本](https://uniapp.dcloud.io/api/ui/tabbar?id=settabbarbadge) | +| setTabBarItem | object | [动态设置 tabBar 某一项的内容](https://uniapp.dcloud.io/api/ui/tabbar?id=settabbaritem) | +| reload | 无 | 有特殊情况下,你可能需要调用重新载入tabbar配置,比如在内页进行了配置更新,返回前一个页面,自动读取前一个页面的配置 | +| showTabBar | 无 | 显示tabbar,默认显示,无动画效果 | +| hideTabBar | 无 | 隐藏tabbar,无动画效果 | + + +``` +//页面调用组件添加ref + +// setTabBarBadge ,为 tabBar 某一项的右上角添加文本 +this.$refs.tabbar.setTabBarBadge({ + index: 0, + text: '10' +}) + +//setTabBarItem 动态设置 tabBar 某一项的内容 +this.$refs.tabbar.setTabBarBadge({ + index: 0, + text: 'text', + pagePath: 'newPagePath', + //插件新增pagePath,注意native模式下,如果更改了pagePath,可能存在选中项自动选中失败问题 + iconPath: '/path/to/iconPath', + selectedIconPath: '/path/to/selectedIconPath' +}) + +//如果直接在onload或者onshow等组件还在加载中的特殊情况下,由于加载比较慢, +// 方法可能会失效,建议放在nextTick函数里面 +this.$nextTick(()=>{ + this.$refs.tabbar.setTabBarBadge({ + index: 0, + text: '10' + }) +}) +//reload重载整个组件 +this.$nextTick(()=>{ + this.$refs.tabbar.reload() +}) +``` + +tabbarConfig参数新增dot配置项,可以单独配置每一项的右上角角标,可传入任意类型,不显示为空即可或者不填写, 默认为红色,如果想更改样式,请使用样式覆盖`m-tabbar__badge` +``` +list: [{ + pagePath: "/pages/index/index", + iconPath: "/static/tabbar/index.png", + selectedIconPath: "/static/tabbar/index_active.png", + text: "首页", + dot: 1 + }, { + pagePath: "/pages/shop/index", + iconPath: "/static/tabbar/shop.png", + selectedIconPath: "/static/tabbar/shop_active.png", + text: "门店", + dot: '' + }, { + pagePath: "/pages/my/index", + iconPath: "/static/tabbar/my.png", + selectedIconPath: "/static/tabbar/my_active.png", + text: "我的", + dot: '' + }] +``` + + +### 目前已知问题 + +- 1、在全局加样式 filter: grayscale(1) 后,tabbar组件的fixed样式失效,排版在页面最底部(无法修复) +- 2、微信小程序native模式首次进入的时候,底部tabbar会闪动一下(无法修复) 建议全局页面做一个延迟加载效果,等全部加载完成后,在显示 + + +### 插件写的时候,没办法照顾到所有平台,欢迎点评指正,如有问题欢迎给我留言 + +#### 例如: +``` +设备:iphone13 +系统: ios13 +使用环境平台: 微信小程序、app +使用vue版本 :vue3 +问题描述: 提示什么什么错误 +``` \ No newline at end of file