feat: 接入导航栏内嵌tabs效果

sadais-org · Sep 11, 2020 · 866dcc5 · 866dcc5
1 parent 1fb48d1
commit 866dcc5
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 11 deletions.
diff --git a/components/pi-navbar/index.vue b/components/pi-navbar/index.vue
@@ -13,7 +13,10 @@
           class="pi-align-center nav-icon"
           :class="[
             capsuleTheme,
-            { 'capsule pi-round': capsuleButton && !$slots.left && showBack && showHome }
+            {
+              'capsule pi-round':
+                capsuleButton && !$slots.left && showBack && isShowBack && showHome
+            }
           ]"
         >
           <slot v-if="$slots.left" name="left" />
@@ -291,9 +294,14 @@ export default {
   .nav-icon {
     position: relative;
     z-index: 1;
+
+    // 小程序才开启胶囊效果
+
+    /* #ifdef MP */
     &.capsule {
       position: relative;
       margin-left: 20rpx;
+      border: 1px solid rgba(0, 0, 0, 0.1);
       &::before {
         position: absolute;
         top: 50%;
@@ -304,16 +312,22 @@ export default {
         transform: scaleX(0.5) translate(-50%, -50%);
       }
       &.dark {
-        background: #999999;
+        &::before {
+          background: #999999;
+        }
+
         background: rgba(0, 0, 0, 0.35);
-        border: 1px solid rgba(0, 0, 0, 0.5);
       }
       &.light {
-        background: #e5e5e5;
+        &::before {
+          background: #e5e5e5;
+        }
+
         background: rgba(252, 252, 252, 0.3);
-        border: 1px solid rgba(0, 0, 0, 0.1);
       }
     }
+
+    /* #endif */
   }
   .through-space {
     position: absolute;

diff --git a/components/pi-switch/index.vue b/components/pi-switch/index.vue
@@ -169,8 +169,7 @@ export default {
     background: #ffffff;
     border-radius: 50%;
     /* stylelint-disable */
-    box-shadow: -2rpx 4rpx 4rpx 0 rgba(0, 0, 0, 0.1),
-      0 4rpx 23rpx 0 rgba(0, 0, 0, 0.08),
+    box-shadow: -2rpx 4rpx 4rpx 0 rgba(0, 0, 0, 0.1), 0 4rpx 23rpx 0 rgba(0, 0, 0, 0.08),
       0 0 4rpx 0 rgba(0, 0, 0, 0.2);
     transition: all cubic-bezier(0.3, 1.05, 0.4, 1.05) $pi-animation-duration;
   }

diff --git a/components/pi-tabs/index.vue b/components/pi-tabs/index.vue
@@ -4,11 +4,16 @@
       <scroll-view class="pi-scroll" :scroll-left="scrollLeft" scroll-x scroll-with-animation>
         <view class="scroll-wrap" :style="[scrollWrapStyle]">
           <view
-            v-for="item in items"
+            v-for="(item, index) in items"
             :id="`id-${item[keyField]}`"
             :key="item[keyField]"
-            :style="[getItemStyle, itemStyle]"
+            :style="[
+              getItemStyle,
+              itemStyle,
+              activeIndex === index && activeColor ? { color: activeColor } : ''
+            ]"
             class="pi-tab pi-align-center pi-fz-30"
+            :class="[{ active: activeIndex === index }]"
             @tap="handleSelectItem(item)"
           >
             <!-- slot slot-scoped只支持app,h5,微信小程序平台 -->
@@ -178,7 +183,7 @@ export default {
   computed: {
     activeIndex() {
       if (!this.val) return 0
-      return this.items.findIndex(i => i[this.keyField] === this.val[this.keyField])
+      return this.items.findIndex(item => item[this.keyField] === this.val[this.keyField]) || 0
     },
     getHeight() {
       return this.$pi.common.addUnit(this.height)
@@ -284,6 +289,10 @@ export default {
     .pi-tab {
       display: inline-block;
       text-align: center;
+      transition: all $pi-animation-duration ease-in-out;
+      &.active {
+        color: $pi-primary-color;
+      }
     }
     .slider-bar-guide {
       position: absolute;

diff --git a/tools/navi.js b/tools/navi.js
@@ -45,21 +45,36 @@ export const decodeParams = params => {
   return convertObject
 }
 
+let routing = false // 控制重复打开页面
+const routingMethods = ['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'] // 需要路由控制的页面
+
 /**
  * 页面跳转封装
  * @param {String} method 微信JS跳转方法
  * @param {String} url 页面路径
  * @param {Object} params 页面参数
  */
 const _openInterceptor = (method, url, params) => {
+  if (routing && routingMethods.includes(method)) return
   if (url.indexOf('/') !== 0) {
     url = '/' + url
   }
   const stringParams = objToUrl(params)
   url = url + (url.indexOf('?') !== -1 ? stringParams.replace('?', '&') : stringParams)
   uni.hideKeyboard()
   console.log('使用导航：', method, url, params)
-  return uni[method]({ url })
+  return new Promise((resolve, reject) => {
+    if (routingMethods.includes(method)) routing = true
+    uni[method]({
+      url,
+      complete: res => {
+        routing = false
+        const isSuccess = res.errMsg && res.errMsg.indexOf(':ok') !== -1
+        if (isSuccess) resolve(res)
+        else reject(res)
+      }
+    })
+  })
 }
 
 /**