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 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{searchInfo.area && searchInfo.area.length ? searchInfo.area[1].areaName : areaList[1][0].areaName}}
-
-
-
-
+
-
-
-
-
- 分类
-
-
-
-
-
-
- {{item.goodsCategoryName}}
-
-
-
-
-
-
-
-
-
- {{item.name}}
-
-
-
- {{item.name}}
-
-
-
-
-
-
-
-
-
-
-
-
- 当前城市
-
-
-
-
-
-
-
-
-
-
-
-
-
- 其他城市
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{searchInfo.area && searchInfo.area.length ? searchInfo.area[1].areaName : areaList[1][0].areaName}}
+
+
+
+
+
+
+
+
+
+ 分类
+
+
+
+
+
+
+ {{item.goodsCategoryName}}
+
+
+
+
+
+
+
+
+
+
+ {{item.name}}
+
+
+
+
+ {{item.name}}
+
+
+
+
+
+
+
+
+
+
+
+
+ 当前城市
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 其他城市
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 需先授权定位功能才可正常使用功能
+
+
+ 拒绝授权
+
+
+
+
-
-
-
-
-
- 需先授权定位功能才可正常使用功能
-
-
- 拒绝授权
-
-
-
-
-
-
+
+
+
-
+
+ .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 @@
+
@@ -6,21 +7,48 @@
+
@@ -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 @@
+
+
+
+
+
+
+
+
+
+
+ {{item.dot}}
+
+
+
+
+ {{ item.text }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ 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