三年五载_3n5z

自用 qs

Vant自定义微信小程序的tabbar

效果图

具体方法

  • 先定义一个custom-tab-tab文件夹,并与app.json同级,里面定义名为indexComponent,如下图

结构

  • wxml文件
  <van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item wx:for="{{ list }}" wx:key="index" icon="{{ item.icon }}">{{
    item.text
  }}</van-tabbar-item>
</van-tabbar>
  • js文件
// custom-tab-bar/index.js
Component({
  /**
   * 组件的初始数据
   */
  data: {
    active: '',
    list: [{
        icon: 'home-o',
        text: '首页',
        url: '/pages/index/index'
      },
      {
        icon: 'apps-o',
        text: '菜单',
        url: '/pages/menu/index'
      },
      {
        icon: 'shopping-cart-o',
        text: '购物车',
        url: '/pages/shopper/index'
      },
      {
        icon: 'manager-o',
        text: '我的',
        url: '/pages/my/index'
      }
    ]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onChange(event) {
            // this.setData({ active: event.detail });
            wx.switchTab({
                url: this.data.list[event.detail].url
            });
        },
    init() {
            const page = getCurrentPages().pop();
            this.setData({
                active: this.data.list.findIndex(item => item.url === `/${page.route}`)
            });
        }

  }
})
  • app.json
        "list": [
            {
                "pagePath": "pages/index/index"
            },
            {
                "pagePath": "pages/menu/index"
            },
            {
                "pagePath":  "pages/shopper/index"
            },
            {
                "pagePath":  "pages/my/index"
            }
        ]


还需要在每个tabbar页面的onShow里面加上 this.getTabBar().init();,这样不会出现图标闪烁和跳转延迟的问题,如果看不太懂可以查看官网并导入片段尝试
vant-tabbar官方示例

本原创文章未经允许不得转载 | 当前页面:三年五载_3n5z » Vant自定义微信小程序的tabbar

评论 1

  1. FB friends spy is a facebook windows application that offers to its user’s information about their friends they cannot find in there profiles:
    1. Online presence information (offline/online) even if you are in offline chat mode.
    2. People most interested by them.
    3. People most interacting with them(on comments not messages , spying on messages is illegal and forbidden by facebook, so it is impossible to do, thank you for your understanding).
    4. latest Facebook statuses
    5. Places visited.
    6. Events attending or already participated in
    FB friend's spy will ask you for permissions to offer you the information you want, this information will and still be used only by you, it will not be used by anyone else.
    FB friend’s spy uses Facebook SDK to connect to Facebook, so users don’t have to worry about their private or secret information.

    Shubertrtskepe 2021-06-25    回复