From 45994120a96e8ccff4bcc0dd0ec334332651f403 Mon Sep 17 00:00:00 2001
From: rex <rexkaneki@gmail.com>
Date: Mon, 9 Jul 2018 21:34:27 +0800
Subject: [PATCH] =?UTF-8?q?feat(tab):=20tab=E7=BB=84=E4=BB=B6=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E9=80=89=E4=B8=AD=E9=A1=B9=E8=87=AA=E5=8A=A8=E6=BB=91?=
 =?UTF-8?q?=E5=8A=A8=E5=88=B0=E4=B8=AD=E9=97=B4=E4=BD=8D=E7=BD=AE=20@rex-z?=
 =?UTF-8?q?sd=20(#347)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#307
---
 packages/tab/index.js   | 19 +++++++++++++++++++
 packages/tab/index.wxml |  6 +++++-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/tab/index.js b/packages/tab/index.js
index 3483f190..ed1559ca 100644
--- a/packages/tab/index.js
+++ b/packages/tab/index.js
@@ -24,10 +24,29 @@ Component({
     }
   },
 
+  data: {
+    scrollLeft: 0
+  },
+
   methods: {
+    _handleScroll(selectedId) {
+      const query = wx.createSelectorQuery().in(this);
+      query.select(`#item-${selectedId}`).boundingClientRect();
+      query.select('#scroll-view').boundingClientRect();
+      query.select('#scroll-view').scrollOffset();
+      query.exec(res => {
+        this.setData({
+          scrollLeft: res[2].scrollLeft + res[0].left + res[0].width / 2 - res[1].width / 2
+        });
+      });
+    },
     _handleZanTabChange(e) {
       const selectedId = e.currentTarget.dataset.itemId;
 
+      if (this.data.scroll) {
+        this._handleScroll(selectedId);
+      }
+
       this.setData({
         selectedId
       });
diff --git a/packages/tab/index.wxml b/packages/tab/index.wxml
index 1a52111e..340ef609 100644
--- a/packages/tab/index.wxml
+++ b/packages/tab/index.wxml
@@ -4,8 +4,11 @@
 >
   <block wx:if="{{ scroll }}">
     <scroll-view
+      id="scroll-view"
       class="zan-tab__bd zan-tab__bd--scroll {{ fixed ? 'zan-tab__bd--fixed' : '' }}"
-      scroll-x="true"
+      scroll-x
+      scroll-with-animation
+      scroll-left="{{ scrollLeft }}"
       style="height: {{ height ? height + 'px' : 'auto' }}"
     >
       <template
@@ -34,6 +37,7 @@
     wx:for="{{ list }}"
     wx:key="id"
     class="zan-tab__item {{ selectedId == item.id ? 'zan-tab__item--selected' : '' }}"
+    id="item-{{ item.id }}"
     data-item-id="{{ item.id }}"
     bindtap="_handleZanTabChange"
   >