微信小程序自定义tabbar切换时页面抖动

小程序自定义 TabBar 切换时页面抖动可能是因为页面切换时，底部 TabBar 的高度变化导致页面重新布局，从而造成了抖动的效果。解决这个问题有以下几种方法：

1. 可以在 TabBar 的样式中设置固定的高度，这样在切换页面时，底部的 TabBar 高度就不会发生变化了，从而避免了页面抖动的效果。

2. 可以使用 CSS 动画来过渡 TabBar 切换时的高度变化，这样就可以平滑地过渡页面布局的变化，减少页面抖动的效果。

3. 可以在切换页面时，先隐藏底部的 TabBar，等页面切换完成后再显示，这样也可以避免页面抖动的效果。

以上是几种解决微信小程序自定义 TabBar 切换时页面抖动的方法，你可以根据实际情况选择适合自己的方法。

相关问题

微信小程序 自定义tabbar

微信小程序自定义tabbar是指开发者可以在微信小程序的页面结构中，自定义底部导航栏的设计，以便于用户快速切换不同的功能模块或页面。默认情况下，小程序会提供一个预设的tabbar样式，包含五个固定的标签：首页、发现、通讯录、服务、我的。但如果你需要更个性化的展示，可以按照以下步骤操作：

1. **设置TabBar**：在`app.json`文件中，添加或修改`tabBar`配置项，包括各个标签的文字、路径、图标等信息。例如：

   "tabBar": {
     "color": "#fff",
     "selectedColor": "#f00",
     "borderStyle": "#ddd",
     "list": [
       {"pagePath": "pages/index/index", "text": "首页", "iconPath": "path/to/icon1.png"},
       {"pagePath": "pages/discover/discover", "text": "发现", "iconPath": "path/to/icon2.png"}
     ]
   }

2. **动态调整**：通过`wx.setTabBar` API，在运行时可以根据业务需求更改某一个标签的状态，如显示或隐藏。

3. **异步加载**：如果你的应用有多个层级深的页面，可以通过`setData`更新当前页的数据，使得对应的tabbar标签高亮显示。

4. ** tabBar.wxss定制**：如果你想进一步定制tabbar的样式，可以编写独立的`.wxss`样式文件，并在其中修改颜色、字体、间距等属性。

微信小程序自定义tabbar custom

微信小程序的tabBar是由系统自带的，无法直接修改。但是可以通过在页面中隐藏tabBar，在页面底部自定义一个类似的组件来实现自定义tabBar的效果。

具体实现步骤如下：

1. 在app.json中将"tabBar"的属性设置为"custom"，表示不使用系统自带的tabBar。

"tabBar": {
  "custom": true
}

2. 在每个页面的js文件中，使用Page()方法将页面注册为一个组件，并在页面中隐藏tabBar。

Page({
  onLoad: function () {
    wx.hideTabBar();
  }
})

3. 在页面底部自定义一个组件，作为自定义tabBar，并在组件中实现点击事件和样式。

4. 在自定义tabBar的组件中监听app.js中的globalData中的变量（如tabIndex），并在页面切换时改变该变量的值，从而控制自定义tabBar中的选中状态。

需要注意的是，由于自定义的tabBar需要在多个页面中使用，因此最好将自定义tabBar封装为一个单独的组件，并在app.json中进行注册。

希望能帮到你！