微信小程序自定义底部导航栏，切换不同页面显示不同tabbar

在一个微信小程序中想要用到两种不同的tabbar样式，需要在app.js中自定义，在页面加载时进行调用。

比如一个小程序需要两个版本（用户版、商家版），并且能通过一个按钮在两个版本间进行切换，可能会用到这种方式。

此处以两个页面（index，logs）显示两种tabbar样式为例，通过切换按钮进行切换。

首先有一个模板文件：tabbar.wxml

在app.json中无需定义“tabBar”

在app.js中自定义如下

在app.wxss中定义显示样式

index.wxml，用到自定义tabbar的页面的首部都需要引入模板文件

index.js

logs.js

加载自定义tabbar的那句话（app.editTabBar）写在onload或onshow中都可以。

只写了两个主页面，其他页面可自行定义跳转。

最后放上效果图：

微信小程序Swiper做Tab切换，带tab切换动画

小程序中我们做tab切换一般情况下可以做点击切换，但是有Swiper组件，其实我们也可以做滑动切换

监听Swiper的bindchange，我们就可以在切换时改变tab的选装状态达到切换的目的。

但是这样的方式tab的切换方式是跳转式的，体验不是很好。于是就有了这个demo，我们一步步优化切换体验。

首先：利用flex布局，做出tab区域，如果tab选项卡很多可以使用Scroll-view；一般的跳转式的tab用boder-bottom实现就好，这里我们加了一个“navbar-slider”，加上translateX动画实现平移切换。

然后：计算出每个tabItem的宽度，和每个item距离0坐标的距离；下中50是slider的宽度，对应上面“width:50px”

关联：1、监听item点击，切换swiper；2、监听swiper切换改变slider位置和tab显示

效果展示如下：

现在我们已经实现了，Swiper和tab的带动画联动，但是我们可以发现，我们的切换动画是在切换之后进行的，我们这里还可以继续优化。

swiper在切换时可以监听bindtransition，swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}，dx则是平移的偏移量，我们可以通过这个监听来实时设置slider的位置。

切换后校正slider的位置，这里我们不能使用bindchange来校正，因为bindchange在切换时手指释放的时候就调用了，我们这里使用bindanimationfinish回调来校正（动画结束时会触发 animationfinish 事件，event.detail 同上）

最终：展示如下

在小程序开发文档中明确说明了最好不要频繁调用setData，我们最后这种方式就会频繁的调用，所以这里其实只是提供这种思路，但是工程中并不建议这么使用

小程序开发者文档

SwiperTab

微信小程序传奇电脑版键盘 *** 作说明：

1. WASD 控制角色的面向及行走；

2. Tab 开启/关闭地图；

3. 空格键跳跃；

4. Ctrl+鼠标左键点击可以攻击怪物；

5. 鼠标右键点击可以使用物品；

6. 1-9键可以使用英雄背包里的物品；

7. Shift+鼠标左键可以普通拾取；

8. Shift+鼠标右键可以快速拾取；

9. F1-F5键可以使用快捷键功能；

10. Enter键用于聊天；

---