背景
前不久，剛完成了乙個商品列表+購物車功能的頁面，因為一級商品分類在頂部tab中顯示，可滑動，間距可定製，如下圖所示：
定製的tab需求如下：
1. 每個tab-item的間距是相同的，可定製
2. 每乙個tab-item的寬度是隨著文字的增多而寬度增大
3. 當tab-item小於等於4個時，tab-item填滿當前螢幕，平分剩餘空間；當tab-item超過4個時，tab可滑動選擇
4. 點選tab-item時，底部橫線居中顯示，跟隨在點選的tab-item底部
成品效果如下：
這個元件基本滿足上面5點需求
難點
1）使用vux的可滑動的tab，修改元件css，如何令到每乙個tab的間距為響應式的。
2）這個元件最核心的就是底部bar的精準定位跟隨
3）從前乙個頁面點選一級分類進入商品列表頁，自動選中並在螢幕居中顯示被選中的tab-item
前期知識點
1）offsetleft：子元素相對于父元素最左上角側的橫向偏離位置
2）offsetwidth： 元素的寬度
3）scrollleft： 滑動到對應的x座標
4）定位元素style.left的運用
5）vux元件之滑動tab的運用 （需要用到元件自帶的onitemclick()方法，通過dom，可以起到點選該tab-item的作用）
難點逐一破解
1）使用vux的可滑動的tab，修改元件css，如何令到每乙個tab的間距為響應式的。
原本vux的可滑動的tab是根據scrollwidth的長度來自動計算每乙個tab-item的寬度的，因為包含這tab-item的tabbox這個div使用的是flex布局，而tab-item是它的子元素，它會自動沾滿tabbox。如果文字超出了tab-item的寬度，文字就會被隱藏。
可以通過修改vux-tab-item這個樣式來自定義樣式，把子元素的彈性屬性去除，並且設定他的padding，這樣可以呈現出文字能顯示全，並且每個tab-item間距相同的效果，css如下：
/*改變原來tabbox的flex布局*/2）這個元件最核心之一的就是底部bar的精準定位跟隨因為上面的1）改變了布局，所以導致底部bar跟隨不準確的情況，我們可以定製bar。在vux裡面，bar是乙個div，它有滑動的動畫，我的做法是這樣的，首先通過right讓它置於tab的最左側，然後通過按鈕點選事件獲得相對應的tab-item元素的下標，然後使用for迴圈從第一tab-item開始尋找，如果不為改元素，則把它的元素寬度進行累加，直到找到該需啟用的tab-item，然後通過數學計算可把bar定位在該元素的底部並且居中，**如下：.tab-component .vux-tab .vux-tab-item
onitemclick(keyword, index)3）從前乙個頁面點選一級分類進入商品列表頁，自動選中並在螢幕居中顯示被選中的tab-item思路是這樣的：barleft += document.getelementsbyclassname('vux-tab-item')[i].offsetwidth;
i += 1;
}document.getelementsbyclassname('vux-tab-ink-bar')[0].style.left = (barleft + 'px');
},
當tab-item的數量為4個或者以下的時候，獲取當前螢幕寬度，然後評分長度，計算之後，平均分給tab-item，因為每乙個tab-item自己的樣式中有設定的padding屬性，所以間距相同，不需要額外為間距分配空間。
當tab-item的數量超過4個，則不需要分配寬度，因為是flex布局的子元素，每乙個tab-item會根據自己的文字得到自己的寬度。
最重要最核心的來了，如何讓選中的tab-item居中顯示，例如，螢幕為320px, 需要居中顯示的tab-item（簡稱sitem）距離螢幕最右側1000px，sitem本身長度為60，問現在如何讓sitem居中在長度為320px的螢幕當中？
通過下面這段**
// 偽**可以把上面這種狀態變為下圖：this.$refs.tabboxouter.scrollleft = sitem.offsetleft
通過下面這段**，就可以把上圖的兩黑點中心在垂直方向上重合，並且滾動顯示在螢幕上面
this.$refs.tabboxouter.scrollleft = sitem.offsetleft - tabconter完整**（只要配置了vux環境，就能直接執行此元件）
tab元件}
go to 2
go to 3
go to 4
go to 5
go to 6
go to 7
vux 選擇器 vue專案中vux的使用
vux 在vue cli中使用步驟如下 1 安裝 npm i vux s 2 vux2必須配合vux loader使用，並配置build webpack.base.conf.js npm i vux loader d const vuxloader require vux loader const ...
vux 選擇器 vue專案中vux的使用
vux 在vue cli中使用步驟如下 1 安裝 npm i vux s 2 vux2必須配合vux loader使用，並配置build webpack.base.conf.js npm i vux loader d const vuxloader require vux loader const ...
Vue可復用的過渡
過渡可以通過 vue 的元件系統實現復用。要建立乙個可復用過渡元件，你需要做的就是將或者作為根元件，然後將任何子元件放置在其中就可以了。使用template的簡單例子 vue.component my special transition afterenter function el 函式式元件更適...