wepy微信小程序使用自定义tabbar

2019-06-29  本文已影响0人  咕嘟咕嘟li

1.app.wpy文件中的tabBar的list也要配置好,如下

  ...
  config = {
    ...
    tabBar: {
      ...
      'list': [
        {
          'selectedIconPath': 'images/banxue-active.png',
          'iconPath': 'images/banxue.png',
          'pagePath': 'pages/index',
          'text': '伴学'
        },
        {
          'selectedIconPath': 'images/my-active.png',
          'iconPath': 'images/my.png',
          'pagePath': 'pages/my',
          'text': '我的'
        }
      ]
    }
  }
  ...

2.在app.wpy文件中添加

onLaunch() {
    // 使用自定义tabBar, 隐藏tabBar
    wx.hideTabBar()
 }

3.新建tabbar.wpy
4.在要显示tabbar的页面中引入tabbar.wpy文件,并在该页面的onShow生命周期中隐藏微信的tabBar

// index.wpy
<template>
  <view>
     ···页面内容
    <tabBar></tabBar>
  </view>
</template>
// 引入tabbar.wpy文件
import TabBar from '../components/tabbar'
export default class Index extends wepy.page {
  components = {
    tabBar: TabBar
  }
  onShow () {
    // 使用自定义tabBar, 隐藏微信的tabBar
    wx.hideTabBar()
  }
}
上一篇下一篇

猜你喜欢

热点阅读