# 自定義tarbar ``` <pre class="calibre15">``` <span class="token"><</span>template name<span class="token">=</span><span class="token4">"tarbar"</span><span class="token">></span> <span class="token"><</span>view <span class="token2">class</span><span class="token">=</span><span class="token4">"bottom-card"</span><span class="token">></span> <span class="token"><</span>view <span class="token2">class</span><span class="token">=</span><span class="token4">"tar-item"</span><span class="token">></span> <span class="token"><</span>view <span class="token2">class</span><span class="token">=</span><span class="token4">"ico-item"</span> @click<span class="token">=</span><span class="token4">"select(0)"</span><span class="token">></span> <span class="token"><</span>image <span class="token1">:</span>src<span class="token">=</span><span class="token4">"img0"</span> mode<span class="token">=</span><span class="token4">"aspectFit"</span> <span class="token2">class</span><span class="token">=</span><span class="token4">"ico"</span><span class="token">></span><span class="token"><</span><span class="token">/</span>image<span class="token">></span> <span class="token"><</span>text <span class="token1">:</span><span class="token2">class</span><span class="token">=</span><span class="token4">"class0"</span><span class="token">></span>首頁<span class="token"><</span><span class="token">/</span>text<span class="token">></span> <span class="token"><</span><span class="token">/</span>view<span class="token">></span> <span class="token"><</span>view <span class="token2">class</span><span class="token">=</span><span class="token4">"ico-item"</span> @click<span class="token">=</span><span class="token4">"select(1)"</span><span class="token">></span> <span class="token"><</span>image <span class="token1">:</span>src<span class="token">=</span><span class="token4">"img1"</span> mode<span class="token">=</span><span class="token4">"aspectFit"</span> <span class="token2">class</span><span class="token">=</span><span class="token4">"ico"</span><span class="token">></span><span class="token"><</span><span class="token">/</span>image<span class="token">></span> <span class="token"><</span>text <span class="token1">:</span><span class="token2">class</span><span class="token">=</span><span class="token4">"class1"</span><span class="token">></span>采集日志<span class="token"><</span><span class="token">/</span>text<span class="token">></span> <span class="token"><</span><span class="token">/</span>view<span class="token">></span> <span class="token"><</span>view <span class="token2">class</span><span class="token">=</span><span class="token4">"ico-item"</span> @click<span class="token">=</span><span class="token4">"select(2)"</span><span class="token">></span> <span class="token"><</span>image <span class="token1">:</span>src<span class="token">=</span><span class="token4">"img2"</span> mode<span class="token">=</span><span class="token4">"aspectFit"</span> <span class="token2">class</span><span class="token">=</span><span class="token4">"ico"</span><span class="token">></span><span class="token"><</span><span class="token">/</span>image<span class="token">></span> <span class="token"><</span>text <span class="token1">:</span><span class="token2">class</span><span class="token">=</span><span class="token4">"class2"</span><span class="token">></span>日志列表<span class="token"><</span><span class="token">/</span>text<span class="token">></span> <span class="token"><</span><span class="token">/</span>view<span class="token">></span> <span class="token"><</span>view <span class="token2">class</span><span class="token">=</span><span class="token4">"ico-item"</span> @click<span class="token">=</span><span class="token4">"select(3)"</span><span class="token">></span> <span class="token"><</span>image <span class="token1">:</span>src<span class="token">=</span><span class="token4">"img3"</span> mode<span class="token">=</span><span class="token4">"aspectFit"</span> <span class="token2">class</span><span class="token">=</span><span class="token4">"ico"</span><span class="token">></span><span class="token"><</span><span class="token">/</span>image<span class="token">></span> <span class="token"><</span>text <span class="token1">:</span><span class="token2">class</span><span class="token">=</span><span class="token4">"class3"</span><span class="token">></span>我的<span class="token"><</span><span class="token">/</span>text<span class="token">></span> <span class="token"><</span><span class="token">/</span>view<span class="token">></span> <span class="token"><</span><span class="token">/</span>view<span class="token">></span> <span class="token"><</span><span class="token">/</span>view<span class="token">></span> <span class="token"><</span><span class="token">/</span>template<span class="token">></span> <span class="token"><</span>script<span class="token">></span> <span class="token2">export</span> <span class="token2">default</span><span class="token1">{</span> props<span class="token1">:</span><span class="token1">{</span> activeIndex<span class="token1">:</span><span class="token1">{</span> type<span class="token1">:</span>Number<span class="token1">,</span> <span class="token2">default</span><span class="token1">:</span><span class="token5">0</span> <span class="token1">}</span> <span class="token1">}</span><span class="token1">,</span> name<span class="token1">:</span><span class="token4">'tarbar'</span><span class="token1">,</span> <span class="token3">data</span><span class="token1">(</span><span class="token1">)</span><span class="token1">{</span> <span class="token2">return</span><span class="token1">{</span> img0<span class="token1">:</span> <span class="token4">'/static/icons/mj/index.png'</span><span class="token1">,</span> img1<span class="token1">:</span> <span class="token4">'/static/icons/mj/caiji.png'</span><span class="token1">,</span> img2<span class="token1">:</span> <span class="token4">'/static/icons/mj/log.png'</span><span class="token1">,</span> img3<span class="token1">:</span> <span class="token4">'/static/icons/mj/mine.png'</span><span class="token1">,</span> active_index<span class="token1">:</span><span class="token5">0</span><span class="token1">,</span> class1<span class="token1">:</span><span class="token4">''</span><span class="token1">,</span> class2<span class="token1">:</span><span class="token4">''</span><span class="token1">,</span> class0<span class="token1">:</span><span class="token4">''</span><span class="token1">,</span> class3<span class="token1">:</span><span class="token4">''</span><span class="token1">,</span> <span class="token1">}</span> <span class="token1">}</span><span class="token1">,</span> <span class="token3">mounted</span><span class="token1">(</span><span class="token1">)</span> <span class="token1">{</span> <span class="token2">this</span><span class="token1">.</span>active_index <span class="token">=</span> <span class="token2">this</span><span class="token1">.</span>activeIndex<span class="token1">;</span> console<span class="token1">.</span><span class="token3">log</span><span class="token1">(</span><span class="token2">this</span><span class="token1">.</span>active_index<span class="token1">)</span><span class="token1">;</span> <span class="token2">switch</span> <span class="token1">(</span><span class="token2">this</span><span class="token1">.</span>active_index<span class="token1">)</span><span class="token1">{</span> <span class="token2">case</span> <span class="token5">0</span><span class="token1">:</span> <span class="token2">this</span><span class="token1">.</span>img0 <span class="token">=</span> <span class="token4">'/static/icons/mj/index_1.png'</span> <span class="token2">this</span><span class="token1">.</span>class0 <span class="token">=</span> <span class="token4">"active"</span> <span class="token2">break</span><span class="token1">;</span> <span class="token2">case</span> <span class="token5">1</span><span class="token1">:</span> <span class="token2">this</span><span class="token1">.</span>img1 <span class="token">=</span> <span class="token4">'/static/icons/mj/caiji_1.png'</span> <span class="token2">this</span><span class="token1">.</span>class1<span class="token">=</span><span class="token4">"active"</span> <span class="token2">break</span><span class="token1">;</span> <span class="token2">case</span> <span class="token5">2</span><span class="token1">:</span> <span class="token2">this</span><span class="token1">.</span>img2 <span class="token">=</span> <span class="token4">'/static/icons/mj/log_1.png'</span> <span class="token2">this</span><span class="token1">.</span>class2<span class="token">=</span><span class="token4">"active"</span> <span class="token2">break</span><span class="token1">;</span> <span class="token2">case</span> <span class="token5">3</span><span class="token1">:</span> <span class="token2">this</span><span class="token1">.</span>img3 <span class="token">=</span> <span class="token4">'/static/icons/mj/mine_1.png'</span> <span class="token2">this</span><span class="token1">.</span>class3<span class="token">=</span><span class="token4">"active"</span> <span class="token2">break</span><span class="token1">;</span> <span class="token2">default</span><span class="token1">:</span> <span class="token2">break</span><span class="token1">;</span> <span class="token1">}</span> <span class="token1">}</span><span class="token1">,</span> methods<span class="token1">:</span><span class="token1">{</span> <span class="token3">select</span><span class="token1">(</span>index<span class="token1">)</span><span class="token1">{</span> <span class="token2">switch</span> <span class="token1">(</span>index<span class="token1">)</span><span class="token1">{</span> <span class="token2">case</span> <span class="token5">0</span><span class="token1">:</span> uni<span class="token1">.</span><span class="token3">redirectTo</span><span class="token1">(</span><span class="token1">{</span> url<span class="token1">:</span><span class="token4">"/pages/minjing/index/index"</span> <span class="token1">}</span><span class="token1">)</span> <span class="token2">break</span><span class="token1">;</span> <span class="token2">case</span> <span class="token5">1</span><span class="token1">:</span> uni<span class="token1">.</span><span class="token3">redirectTo</span><span class="token1">(</span><span class="token1">{</span> url<span class="token1">:</span><span class="token4">"/pages/tabbar/obtainlog/obtainlog"</span><span class="token1">,</span> fail<span class="token1">:</span> <span class="token1">(</span>erro<span class="token1">)</span> <span class="token">=></span> <span class="token1">{</span> console<span class="token1">.</span><span class="token3">log</span><span class="token1">(</span>erro<span class="token1">)</span> <span class="token1">}</span> <span class="token1">}</span><span class="token1">)</span> <span class="token2">break</span><span class="token1">;</span> <span class="token2">case</span> <span class="token5">2</span><span class="token1">:</span> uni<span class="token1">.</span><span class="token3">redirectTo</span><span class="token1">(</span><span class="token1">{</span> url<span class="token1">:</span><span class="token4">"/pages/tabbar/collectlogs/collectlogs"</span> <span class="token1">}</span><span class="token1">)</span> <span class="token2">break</span><span class="token1">;</span> <span class="token2">case</span> <span class="token5">3</span><span class="token1">:</span> uni<span class="token1">.</span><span class="token3">redirectTo</span><span class="token1">(</span><span class="token1">{</span> url<span class="token1">:</span><span class="token4">"/pages/mine/mine"</span> <span class="token1">}</span><span class="token1">)</span> <span class="token2">break</span><span class="token1">;</span> <span class="token2">default</span><span class="token1">:</span> <span class="token2">break</span><span class="token1">;</span> <span class="token1">}</span> console<span class="token1">.</span><span class="token3">log</span><span class="token1">(</span>index<span class="token1">)</span><span class="token1">;</span> <span class="token1">}</span> <span class="token1">}</span> <span class="token1">}</span> <span class="token"><</span><span class="token">/</span>script<span class="token">></span> <span class="token"><</span>style lang<span class="token">=</span><span class="token4">"scss"</span> scoped<span class="token">></span> <span class="token1">.</span>active<span class="token1">{</span> color<span class="token1">:</span> #<span class="token5">0043</span>b5<span class="token1">;</span> <span class="token1">}</span> <span class="token1">.</span>ico<span class="token1">{</span> width<span class="token1">:</span> <span class="token5">44</span>rpx<span class="token1">;</span> height<span class="token1">:</span> <span class="token5">44</span>rpx<span class="token1">;</span> <span class="token1">}</span> <span class="token1">.</span>ico<span class="token">-</span>item<span class="token1">{</span> display<span class="token1">:</span> flex<span class="token1">;</span> flex<span class="token">-</span>direction<span class="token1">:</span> column<span class="token1">;</span> justify<span class="token">-</span>content<span class="token1">:</span> center<span class="token1">;</span> align<span class="token">-</span>items<span class="token1">:</span> center<span class="token1">;</span> padding<span class="token1">:</span> <span class="token5">15</span>rpx<span class="token1">;</span> <span class="token1">}</span> <span class="token1">.</span>tar<span class="token">-</span>item<span class="token1">{</span> display<span class="token1">:</span> flex<span class="token1">;</span> flex<span class="token">-</span>direction<span class="token1">:</span> row<span class="token1">;</span> justify<span class="token">-</span>content<span class="token1">:</span> space<span class="token">-</span>around<span class="token1">;</span> align<span class="token">-</span>items<span class="token1">:</span> center<span class="token1">;</span> <span class="token1">}</span> <span class="token1">.</span>bottom<span class="token">-</span>card<span class="token1">{</span> position<span class="token1">:</span> fixed<span class="token1">;</span> bottom<span class="token1">:</span><span class="token5">0</span>rpx<span class="token1">;</span> background<span class="token">-</span>color<span class="token1">:</span> #<span class="token5">FFFFFF</span><span class="token1">;</span> width<span class="token1">:</span> <span class="token5">100</span><span class="token">%</span><span class="token1">;</span> height<span class="token1">:</span> <span class="token5">120</span>rpx<span class="token1">;</span> <span class="token6">//border-radius: 50rpx 50rpx 0rpx 0rpx;</span> <span class="token1">}</span> <span class="token"><</span><span class="token">/</span>style<span class="token">></span> ``` ```