|
|
|
<p><img src="http://img.domystery.com/Mys/M00/07/B5/cxwu3l0HSweAJJPTAACqSvNnpfM034.png" title="1560759046504409.png" alt="image.png"/></p><p>自定义的底部导航栏有一个问题，就是跳转页面时都是从右往左转，而底栏是贴着底边的。切换导航就会有一闪一闪的感觉很不友好。</p><p>两个方案可以解决，一个是底部为主页面，上边的内容全是组件，模板一个个引入。但是页面多了，不太合适。</p><p>另外一个方案，取巧，可以在切换的过程中先隐藏底栏，然后自动弹出，这样就好多了。</p><p><br/></p><p><strong>底栏页面：</strong></p><p><img src="http://img.domystery.com/Mys/M00/07/B5/cxwu3l0HWmOAdqlpAACic4bt4Yk612.png" title="1560762979711281.png" alt="image.png"/></p><p><strong>样式文件：</strong><br/></p><p><span style="color: #569cd6;">.icon</span> <span style="color: #dcdcdc;">{</span></p><p><span style="color: #9cdcfe;">width:</span> <span style="color: #b5cea8;">46</span><span style="color: #ce9178;">rpx</span><span style="color: #dcdcdc;">;</span></p><p><span style="color: #9cdcfe;">height:</span> <span style="color: #b5cea8;">46</span><span style="color: #ce9178;">rpx</span><span style="color: #dcdcdc;">;</span></p><p><span style="color: #dcdcdc;">}</span></p><p><br/></p><p><span style="color: #569cd6;">.bottomtab</span><span style="color: #dcdcdc;">{</span></p><p><span style="color: #9cdcfe;">position:</span> <span style="color: #ce9178;">fixed</span><span style="color: #dcdcdc;">;</span></p><p><span style="color: #9cdcfe;">bottom:</span> <span style="color: #b5cea8;">0</span><span style="color: #dcdcdc;">;</span></p><p><span style="color: #9cdcfe;">left:</span> <span style="color: #b5cea8;">0</span><span style="color: #dcdcdc;">;</span></p><p><span style="color: #9cdcfe;">z-index:</span> <span style="color: #b5cea8;">9000</span><span style="color: #dcdcdc;">;</span></p><p><span style="color: #9cdcfe;">display:</span> <span style="color: #ce9178;">grid</span><span style="color: #dcdcdc;">;</span></p><p><span style="color: #9cdcfe;">background:</span> #fff<span style="color: #dcdcdc;">;</span></p><p><span style="color: #9cdcfe;">width:</span> <span style="color: #b5cea8;">100%</span><span style="color: #dcdcdc;">;</span></p><p><span style="color: #dcdcdc;">}</span></p><p><br/></p><p><span style="color: #569cd6;">.itemview</span> <span style="color: #dcdcdc;">{</span></p><p><span style="color: #9cdcfe;">display:</span> <span style="color: #ce9178;">flex</span><span style="color: #dcdcdc;">;</span></p><p><span style="color: #9cdcfe;">font-size:</span> <span style="color: #b5cea8;">20</span><span style="color: #ce9178;">rpx</span><span style="color: #dcdcdc;">;</span></p><p><span style="color: #9cdcfe;">color:</span> #8a8a8a<span style="color: #dcdcdc;">;</span></p><p><span style="color: #9cdcfe;">height:</span> <span style="color: #b5cea8;">90</span><span style="color: #ce9178;">rpx</span><span style="color: #dcdcdc;">;</span></p><p><span style="color: #9cdcfe;">padding:</span> <span style="color: #b5cea8;">20</span><span style="color: #ce9178;">rpx</span> <span style="color: #b5cea8;">0</span> <span style="color: #b5cea8;">14</span><span style="color: #ce9178;">rpx</span> <span style="color: #b5cea8;">0</span><span style="color: #dcdcdc;">;</span></p><p><span style="color: #dcdcdc;">}</span></p><p><br/></p><p><span style="color: #569cd6;">.tabBar-item</span> <span style="color: #dcdcdc;">{</span></p><p><span style="color: #9cdcfe;">float:</span> <span style="color: #ce9178;">left</span><span style="color: #dcdcdc;">;</span></p><p><span style="color: #9cdcfe;">width:</span> <span style="color: #b5cea8;">25%</span><span style="color: #dcdcdc;">;</span></p><p><span style="color: #9cdcfe;">text-align:</span> <span style="color: #ce9178;">center</span><span style="color: #dcdcdc;">;</span></p><p><span style="color: #9cdcfe;">overflow:</span> <span style="color: #ce9178;">hidden</span><span style="color: #dcdcdc;">;</span></p><p><span style="color: #dcdcdc;">}</span></p><p><br/></p><p><span style="color: #569cd6;">.tabBar-itemhover</span><span style="color: #dcdcdc;">{</span></p><p><span style="color: #9cdcfe;">float:</span> <span style="color: #ce9178;">left</span><span style="color: #dcdcdc;">;</span></p><p><span style="color: #9cdcfe;">width:</span> <span style="color: #b5cea8;">25%</span><span style="color: #dcdcdc;">;</span></p><p><span style="color: #9cdcfe;">text-align:</span> <span style="color: #ce9178;">center</span><span style="color: #dcdcdc;">;</span></p><p><span style="color: #9cdcfe;">overflow:</span> <span style="color: #ce9178;">hidden</span><span style="color: #dcdcdc;">;</span></p><p><span style="color: #9cdcfe;">background-color:</span> #fff<span style="color: #dcdcdc;">;</span></p><p><span style="color: #dcdcdc;">}</span></p><p><br/></p><p><span style="color: #608b4e;">/*当前字体颜色*/</span></p><p><br/></p><p><span style="color: #569cd6;">.tabBartext</span> <span style="color: #dcdcdc;">{</span></p><p><span style="color: #9cdcfe;">color:</span> <span style="color: #ce9178;">red</span><span style="color: #dcdcdc;">;</span></p><p><span style="color: #dcdcdc;">}</span></p><p><br/></p><p><strong>JS文件：</strong><br/></p><p>data<span style="color: #dcdcdc;">:</span> <span style="color: #dcdcdc;">{</span></p><p>showtabbar<span style="color: #dcdcdc;">:</span> <span style="color: #569cd6;">false</span><span style="color: #dcdcdc;">,</span></p><p>animationData<span style="color: #dcdcdc;">:</span> <span style="color: #dcdcdc;">{}</span></p><p><span style="color: #dcdcdc;">},</span></p><p>showtab<span style="color: #dcdcdc;">:</span> <span style="color: #569cd6;">function</span><span style="color: #dcdcdc;">(</span>e<span style="color: #dcdcdc;">)</span> <span style="color: #dcdcdc;">{</span></p><p>console<span style="color: #dcdcdc;">.</span>log<span style="color: #dcdcdc;">(</span><span style="color: #ce9178;">'弹出tabbar'</span><span style="color: #dcdcdc;">);</span></p><p><span style="color: #569cd6;">var</span> that <span style="color: #dcdcdc;">=</span> <span style="color: #569cd6;">this</span><span style="color: #dcdcdc;">;</span></p><p><span style="color: #608b4e;">// 显示遮罩层</span></p><p><span style="color: #569cd6;">var</span> animation <span style="color: #dcdcdc;">=</span> wx<span style="color: #dcdcdc;">.</span>createAnimation<span style="color: #dcdcdc;">({</span></p><p>duration<span style="color: #dcdcdc;">:</span> <span style="color: #b5cea8;">300</span><span style="color: #dcdcdc;">,</span></p><p>timingFunction<span style="color: #dcdcdc;">:</span> <span style="color: #ce9178;">"linear"</span><span style="color: #dcdcdc;">,</span></p><p>delay<span style="color: #dcdcdc;">:</span> <span style="color: #b5cea8;">0</span></p><p><span style="color: #dcdcdc;">})</span></p><p>that<span style="color: #dcdcdc;">.</span>animation <span style="color: #dcdcdc;">=</span> animation</p><p>animation<span style="color: #dcdcdc;">.</span>translateY<span style="color: #dcdcdc;">(</span><span style="color: #b5cea8;">300</span><span style="color: #dcdcdc;">).</span>step<span style="color: #dcdcdc;">()</span></p><p>that<span style="color: #dcdcdc;">.</span>setData<span style="color: #dcdcdc;">({</span></p><p>animationData<span style="color: #dcdcdc;">:</span> animation<span style="color: #dcdcdc;">.</span><span style="color: #569cd6;">export</span><span style="color: #dcdcdc;">(),</span></p><p>showtabbar<span style="color: #dcdcdc;">:</span> <span style="color: #569cd6;">true</span></p><p><span style="color: #dcdcdc;">})</span></p><p>setTimeout<span style="color: #dcdcdc;">(</span><span style="color: #569cd6;">function</span><span style="color: #dcdcdc;">()</span> <span style="color: #dcdcdc;">{</span></p><p>animation<span style="color: #dcdcdc;">.</span>translateY<span style="color: #dcdcdc;">(</span><span style="color: #b5cea8;">0</span><span style="color: #dcdcdc;">).</span>step<span style="color: #dcdcdc;">()</span></p><p>that<span style="color: #dcdcdc;">.</span>setData<span style="color: #dcdcdc;">({</span></p><p>animationData<span style="color: #dcdcdc;">:</span> animation<span style="color: #dcdcdc;">.</span><span style="color: #569cd6;">export</span><span style="color: #dcdcdc;">()</span></p><p><span style="color: #dcdcdc;">})</span></p><p><span style="color: #dcdcdc;">}.</span>bind<span style="color: #dcdcdc;">(</span>that<span style="color: #dcdcdc;">),</span> <span style="color: #b5cea8;">300</span><span style="color: #dcdcdc;">)</span></p><p><span style="color: #dcdcdc;">},</span></p><p><br/></p><p>hidetab<span style="color: #dcdcdc;">:</span> <span style="color: #569cd6;">function</span> <span style="color: #dcdcdc;">(</span>e<span style="color: #dcdcdc;">)</span> <span style="color: #dcdcdc;">{</span></p><p>console<span style="color: #dcdcdc;">.</span>log<span style="color: #dcdcdc;">(</span><span style="color: #ce9178;">'关闭tabbar'</span><span style="color: #dcdcdc;">);</span></p><p><span style="color: #569cd6;">var</span> that <span style="color: #dcdcdc;">=</span> <span style="color: #569cd6;">this</span><span style="color: #dcdcdc;">;</span></p><p><span style="color: #608b4e;">// 显示遮罩层</span></p><p><span style="color: #569cd6;">var</span> animation <span style="color: #dcdcdc;">=</span> wx<span style="color: #dcdcdc;">.</span>createAnimation<span style="color: #dcdcdc;">({</span></p><p>duration<span style="color: #dcdcdc;">:</span> <span style="color: #b5cea8;">300</span><span style="color: #dcdcdc;">,</span></p><p>timingFunction<span style="color: #dcdcdc;">:</span> <span style="color: #ce9178;">"linear"</span><span style="color: #dcdcdc;">,</span></p><p>delay<span style="color: #dcdcdc;">:</span> <span style="color: #b5cea8;">0</span></p><p><span style="color: #dcdcdc;">})</span></p><p>that<span style="color: #dcdcdc;">.</span>animation <span style="color: #dcdcdc;">=</span> animation</p><p>animation<span style="color: #dcdcdc;">.</span>translateY<span style="color: #dcdcdc;">(</span><span style="color: #b5cea8;">300</span><span style="color: #dcdcdc;">).</span>step<span style="color: #dcdcdc;">()</span></p><p>that<span style="color: #dcdcdc;">.</span>setData<span style="color: #dcdcdc;">({</span></p><p>animationData<span style="color: #dcdcdc;">:</span> animation<span style="color: #dcdcdc;">.</span><span style="color: #569cd6;">export</span><span style="color: #dcdcdc;">(),</span></p><p>showtabbar<span style="color: #dcdcdc;">:</span> <span style="color: #569cd6;">false</span></p><p><span style="color: #dcdcdc;">})</span></p><p>setTimeout<span style="color: #dcdcdc;">(</span><span style="color: #569cd6;">function</span> <span style="color: #dcdcdc;">()</span> <span style="color: #dcdcdc;">{</span></p><p>animation<span style="color: #dcdcdc;">.</span>translateY<span style="color: #dcdcdc;">(</span><span style="color: #b5cea8;">0</span><span style="color: #dcdcdc;">).</span>step<span style="color: #dcdcdc;">()</span></p><p>that<span style="color: #dcdcdc;">.</span>setData<span style="color: #dcdcdc;">({</span></p><p>animationData<span style="color: #dcdcdc;">:</span> animation<span style="color: #dcdcdc;">.</span><span style="color: #569cd6;">export</span><span style="color: #dcdcdc;">()</span></p><p><span style="color: #dcdcdc;">})</span></p><p><span style="color: #dcdcdc;">}.</span>bind<span style="color: #dcdcdc;">(</span>that<span style="color: #dcdcdc;">),</span> <span style="color: #b5cea8;">300</span><span style="color: #dcdcdc;">)</span></p><p><span style="color: #dcdcdc;">},</span></p><p><span style="color: #dcdcdc;">},</span></p><p><br/></p><p><strong>默认进来底栏先隐藏，onload调用下展示，这样切换导航都会从隐藏到动画弹出来。</strong></p><p><strong><br/></strong></p><p><strong><br/></strong></p> |
|
