custom-tab-bar: 调整箭头效果，合并为1个

af8e4595 · hdx · e53744fe · af8e4595 · af8e4595 · af8e4595
6 changed file
--- a/pages.json
+++ b/pages.json
@@ -933,12 +933,6 @@
      "style": {
        "navigationBarTitleText": "自定义TabBar"
      }
-    },
-    {
-      "path": "pages/template/custom-tab-bar2/custom-tab-bar2",
-      "style": {
-        "navigationBarTitleText": "自定义TabBar2"
-      }
    }
  ],
  "globalStyle": {

--- a/pages/tabBar/template.uvue
+++ b/pages/tabBar/template.uvue
@@ -172,16 +172,8 @@ export default {
          url: 'custom-tab-bar',
          name: '自定义TabBar',
          open: false,
-          pages: [
+          enable: true,
-            {
+          pages: [] as Page[],
-              name: '滚动切换图标',
-              url:'custom-tab-bar'
-            },
-            {
-              name: '凹口',
-              url:'custom-tab-bar2'
-            },
-          ] as Page[],
        },
        {
          id: 'calendar',

--- a/pages/template/custom-tab-bar/custom-tab-bar.uvue
+++ b/pages/template/custom-tab-bar/custom-tab-bar.uvue
 <template>
-  <view class="custom-tab-bar">
+  <view class="tabs">
-    <view class="tab-view">
+    <view ref="tabview" class="tab-view">
      <tab1 ref="tab1" v-if="tabList[0].init" v-show="selectedIndex==0"></tab1>
      <tab2 ref="tab2" v-if="tabList[1].init" v-show="selectedIndex==1"></tab2>
    </view>
-    <view class="tab-bar">
+    <view ref="tabbar" class="tab-bar">
      <view class="tab-item" @click="onTabClick(0)">
        <view ref="tab-item1" class="tab-item-content">
-          <text class="tab-item-icon tab-item-icon1 uni-icon" :class="selectedIndex==0 ? 'tab-item-text-active' : ''">
+          <text v-if="displayArrow" class="tab-item-icon tab-item-arrow uni-icon" :class="selectedIndex==0 ? 'tab-item-text-active' : ''">
-            {{'\ue6be'}}
+            {{'\ue6bd'}}
          </text>
+          <text v-if="!displayArrow" class="tab-item-icon uni-icon"
+            :class="selectedIndex==0 ? 'tab-item-text-active' : ''">{{'\ue644'}}</text>
+          <text v-if="!displayArrow" class="tab-item-text" :class="selectedIndex==0 ? 'tab-item-text-active' : ''">
+            首页
+          </text>
+        </view>
+      </view>
+      <view>
+        <image class="concave-image" src="/static/template/custom-tab-bar2/concave.png"></image>
+        <view class="btn-plus" @click="onPlusClick">
+          <text class="btn-plus-text">+</text>
        </view>
      </view>
      <view class="tab-item" @click="onTabClick(1)">
@@ -50,17 +61,20 @@
            init: false
          } as TabItem,
        ] as TabItem[],
-        selectedIndex: -1
+        selectedIndex: -1,
+        displayArrow: false,
+        $tabViewHeight: 0
      }
    },
    onLoad() {
      uni.$on('tabchange', this.onTabPageEvent)
    },
-    onUnload() {
-      uni.$off('tabchange', this.onTabPageEvent)
-    },
    onReady() {
      this.setSelectedIndex(0)
+      this.$tabViewHeight = (this.$refs["tabview"] as Element).getBoundingClientRect().height
+    },
+    onUnload() {
+      uni.$off('tabchange', this.onTabPageEvent)
    },
    methods: {
      onTabClick(index : number) {
@@ -70,9 +84,10 @@
        }
      },
      onTabPageEvent(top : number) {
-        const tabItem1 = this.$refs["tab-item1"] as Element
+        // const tabItem1 = this.$refs["tab-item1"] as Element
-        const angle = top < 50 ? 0 : 180
+        this.displayArrow = top > this.$tabViewHeight
-        tabItem1.style.setProperty('transform', `rotate(${angle}deg)`)
+        // const angle = displayIcon ? 180 : 0
+        // tabItem1.style.setProperty('transform', `rotate(${angle}deg)`)
      },
      setSelectedIndex(index : number) {
        if (this.selectedIndex === index) {
@@ -82,6 +97,13 @@
          this.tabList[index].init = true
        }
        this.selectedIndex = index
+      },
+      onPlusClick() {
+        uni.showModal({
+          title: "提示",
+          content: "你点击了 +",
+          showCancel: false
+        })
      }
    }
  }
@@ -95,12 +117,14 @@
  .uni-icon {
    font-family: "UniIcon";
-    font-size: 18px;
+    font-size: 16px;
    font-style: normal;
  }
-  .custom-tab-bar {
+  .tabs {
    flex: 1;
+    background-color: #fff;
+    overflow: visible;
  }
  .tab-view {
@@ -112,14 +136,16 @@
  }
  .tab-bar {
-    background-color: #f0f0f0;
-    border-top: 1px solid #dbdbdb;
    flex-direction: row;
    height: 56px;
+    overflow: visible;
  }
  .tab-item {
    flex: 1;
+    position: relative;
+    background-color: #1e90ff;
+    overflow: visible;
  }
  .tab-item-content {
@@ -128,24 +154,50 @@
  }
  .tab-item-icon {
-    color: #555;
+    color: #ccc;
    font-size: 12px;
    text-align: center;
+    margin-bottom: 4px;
  }
  .tab-item-text {
-    color: #555;
+    color: #ccc;
    font-size: 12px;
-    margin-top: 4px;
    text-align: center;
  }
  .tab-item-text-active {
-    color: #007AFF;
+    color: #fff;
  }
-  .tab-item-icon1 {
+  .tab-item-arrow {
    font-size: 30px !important;
    font-weight: bold;
  }
+  .concave-image {
+    width: 115px;
+    height: 56px;
+  }
+  .btn-plus {
+    position: absolute;
+    left: 23px;
+    width: 70px;
+    height: 70px;
+    border-radius: 50px;
+    background-color: #FE5722;
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
+    /* margin-left: auto;
+    margin-right: auto; */
+    margin-top: -35px;
+    align-items: center;
+    justify-content: center;
+    overflow: visible;
+  }
+  .btn-plus-text {
+    color: #fff;
+    font-size: 32px;
+  }
 </style>
--- a/pages/template/custom-tab-bar2/custom-tab-bar2-tab1.uvue
+++ b/pages/template/custom-tab-bar2/custom-tab-bar2-tab1.uvue
-<template>
-  <list-view ref="listView" class="list" :rebound="false" :scroll-y="true" @scrolltolower="loadData()"
-    @scroll="onScroll">
-    <list-item class="list-item" v-for="(item, index) in dataList" :key="index">
-      <text class="title">{{item.title}}</text>
-    </list-item>
-  </list-view>
-</template>
-<script>
-  type ListItem = {
-    title : string
-  }
-  export default {
-    data() {
-      return {
-        dataList: [] as ListItem[]
-      }
-    },
-    created() {
-      this.loadData()
-    },
-    methods: {
-      loadData() {
-        let index = this.dataList.length
-        for (let i = 0; i < 10; i++) {
-          this.dataList.push({
-            title: index.toString(),
-          } as ListItem)
-          index++
-        }
-      },
-      onScroll(e : ScrollEvent) {
-        uni.$emit('tabchange', e.detail.scrollTop)
-      },
-      scrollTop(top : number) {
-        (this.$refs["listView"] as Element).setAttribute('scrollTop', top)
-      }
-    }
-  }
-</script>
-<style>
-  .list {
-    flex: 1;
-    background-color: #ffffff;
-  }
-  .list-item {
-    flex-direction: row;
-    padding: 30px;
-    border-bottom: 1px solid #dbdbdb;
-  }
-  .title {
-    font-size: 16px;
-    text-align: center;
-  }
-</style>
\ No newline at end of file
--- a/pages/template/custom-tab-bar2/custom-tab-bar2-tab2.uvue
+++ b/pages/template/custom-tab-bar2/custom-tab-bar2-tab2.uvue
-<template>
-  <view class="page">
-    <button type="primary">登录</button>
-  </view>
-</template>
-<script>
-  export default {
-    data() {
-      return {
-      }
-    },
-    created() {
-    },
-    methods: {
-    }
-  }
-</script>
-<style>
-  .page {
-    padding: 15px;
-  }
-</style>
\ No newline at end of file
--- a/pages/template/custom-tab-bar2/custom-tab-bar2.uvue
+++ b/pages/template/custom-tab-bar2/custom-tab-bar2.uvue
-<template>
-  <view class="tabs">
-    <view class="tab-view">
-      <tab1 ref="tab1" v-if="tabList[0].init" v-show="selectedIndex==0"></tab1>
-      <tab2 ref="tab2" v-if="tabList[1].init" v-show="selectedIndex==1"></tab2>
-    </view>
-    <view ref="tabbar" class="tab-bar">
-      <view class="tab-item" @click="onTabClick(0)">
-        <view ref="tab-item1" class="tab-item-content">
-          <text class="tab-item-icon uni-icon"
-            :class="selectedIndex==0 ? 'tab-item-text-active' : ''">{{'\ue644'}}</text>
-          <text class="tab-item-text" :class="selectedIndex==0 ? 'tab-item-text-active' : ''">
-            列表
-          </text>
-        </view>
-      </view>
-      <view>
-        <image class="concave-image" src="/static/template/custom-tab-bar2/concave.png"></image>
-        <view class="btn-plus" @click="onPlusClick">
-          <text class="btn-plus-text">+</text>
-        </view>
-      </view>
-      <view class="tab-item" @click="onTabClick(1)">
-        <view ref="tab-item2" class="tab-item-content">
-          <text class="tab-item-icon uni-icon"
-            :class="selectedIndex==1 ? 'tab-item-text-active' : ''">{{'\ue699'}}</text>
-          <text class="tab-item-text" :class="selectedIndex==1 ? 'tab-item-text-active' : ''">
-            我的
-          </text>
-        </view>
-      </view>
-    </view>
-  </view>
-</template>
-<script>
-  import tab1 from './custom-tab-bar2-tab1.uvue';
-  import tab2 from './custom-tab-bar2-tab2.uvue';
-  type TabItem = {
-    init : boolean,
-    preload : boolean,
-  }
-  export default {
-    components: {
-      tab1,
-      tab2
-    },
-    data() {
-      return {
-        tabList: [
-          {
-            init: false
-          } as TabItem,
-          {
-            init: false
-          } as TabItem,
-        ] as TabItem[],
-        selectedIndex: -1
-      }
-    },
-    onReady() {
-      this.setSelectedIndex(0)
-    },
-    methods: {
-      onTabClick(index : number) {
-        this.setSelectedIndex(index);
-        if (index == 0) {
-          (this.$refs["tab1"]! as ComponentPublicInstance).$callMethod('scrollTop', 0)
-        }
-      },
-      onTabPageEvent(top : number) {
-        const tabItem1 = this.$refs["tabs-item1"] as Element
-        const angle = top < 50 ? '0deg' : '180deg'
-        tabItem1.style.setProperty('transform', `rotate(${angle})`)
-      },
-      setSelectedIndex(index : number) {
-        if (this.selectedIndex === index) {
-          return
-        }
-        if (!this.tabList[index].init) {
-          this.tabList[index].init = true
-        }
-        this.selectedIndex = index
-      },
-      onPlusClick() {
-        uni.showModal({
-          title: "提示",
-          content: "你点击了 +",
-          showCancel: false
-        })
-      }
-    }
-  }
-</script>
-<style>
-  @font-face {
-    font-family: "UniIcon";
-    src: url('@/static/fonts/uni-icon.ttf');
-  }
-  .uni-icon {
-    font-family: "UniIcon";
-    font-size: 16px;
-    font-style: normal;
-  }
-  .tabs {
-    flex: 1;
-    background-color: #fff;
-    overflow: visible;
-  }
-  .tab-view {
-    flex: 1;
-  }
-  .tab-view-item {
-    flex: 1;
-  }
-  .tab-bar {
-    flex-direction: row;
-    height: 56px;
-    overflow: visible;
-  }
-  .tab-item {
-    flex: 1;
-    position: relative;
-    background-color: #1e90ff;
-    overflow: visible;
-  }
-  .tab-item-content {
-    margin: auto;
-  }
-  .tab-item-icon {
-    color: #ccc;
-    font-size: 12px;
-    text-align: center;
-    margin-bottom: 4px;
-  }
-  .tab-item-text {
-    color: #ccc;
-    font-size: 12px;
-    text-align: center;
-  }
-  .tab-item-text-active {
-    color: #fff;
-  }
-  .concave-image {
-    width: 115px;
-    height: 56px;
-  }
-  .btn-plus {
-    position: absolute;
-    left: 23px;
-    width: 70px;
-    height: 70px;
-    border-radius: 50px;
-    background-color: #FE5722;
-    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
-    /* margin-left: auto;
-    margin-right: auto; */
-    margin-top: -35px;
-    align-items: center;
-    justify-content: center;
-    overflow: visible;
-  }
-  .btn-plus-text {
-    color: #fff;
-    font-size: 32px;
-  }
-</style>