2023-02-18_有赞小程序UI框架vant weapp之t

前言

• tabbar，底部导航栏，用于在不同页面之间进行切换。
• 按照微信小程序官方的想法，小程序是分为很多page的，而不是普通网页上的单页面。页面之间的切换通过底部的tabbar来进行切换。也可以通过链接来切换。使用底部tabbar就会更加简单和方便。
• 如果使用官方的tabbar，只需要配置 app.json的tabbar参数即可。
• 然后有赞小程序UI框架vant weapp也提供了个性化的tabbar来替换官方的tabbar。本文先介绍官方tabbar的使用，然后介绍有赞小程序UI框架vant weapp的tabbar的使用，然后才是如何替换掉官方的tabbar。

1. 官方tabbar的配置使用

• 只需要配置app.json的tabbar对象即可
• 感觉好丑。。而且还需要自己自定义图标。这也是为什么我选择用自定义tabbar。

image.png image.png

• 示例

  
  image.png

"tabBar": {
  "color": "#ccc",
  "selectedColor": "#ff4c91",
  "backgroundColor": "#ffffff",
  "borderStyle": "white",
  "list": [
    {
      "pagePath": "index/index",
      "text": "index1"
    },
    {
      "pagePath": "index/index2",
      "text": "index2"
    }
  ]
},

2. vant weapp之tabbar的使用

2.1 引入

• 在app.json或index.json中引入组件

"van-tabbar": "../vant-weapp/dist/tabbar/index",
"van-tabbar-item": "../vant-weapp/dist/tabbar-item/index"

2.2 基础使用

image.png

<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item icon="home-o">标签</van-tabbar-item>
  <van-tabbar-item icon="search">标签</van-tabbar-item>
  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>

2.3 显示徽标

image.png

<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item icon="home-o">标签</van-tabbar-item>
  <van-tabbar-item icon="search" dot>标签</van-tabbar-item>
  <van-tabbar-item icon="friends-o" info="5">标签</van-tabbar-item>
  <van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item>
</van-tabbar>

2.4 自定义颜色

image.png

<van-tabbar
  active="{{ active }}"
  active-color="#07c160"
  inactive-color="#000"
  bind:change="onChange"
>
  <van-tabbar-item icon="home-o">标签</van-tabbar-item>
  <van-tabbar-item icon="search">标签</van-tabbar-item>
  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>

2.5 事件

• <van-tabba bind:change="onChange"/> 这个是标签切换事件，需要在该事件中更改 active的数值

  onChange(event) {
    this.setData({ active: event.detail });
  },

3. 替换微信小程序官方的toobar

3.1 修改app.json 中的 tabBar 项。

• 指定custom 字段为true，其他选项可以放空。
• list必须保留，起码要有2个元素，元素个数不需要和实际的个数对应。pagePath属性也必须有，且必须指定到存在的page。否则都会报错。

"tabBar": {
  "custom": true,
  "list": [{"pagePath": "pages/index/index"},{"pagePath": "pages/show/index"}]
}

3.2 添加tabBar组件

在项目的根目录下添加入口文件:

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

3.3 编写tabbar

• 用自定义组件的方式编写即可，该自定义组件完全接管 tabBar 的渲染。另外，自定义组件新增 getTabBar 接口，可获取当前页面下的自定义 tabBar 组件实例。

4. 有赞小程序UI框架vant weapp之tabbar替换官方tabbar的代码

• custom-tab-bar/index.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>

• custom-tab-bar/index.js

Component({
    data: {
        active: 0,
        list: [
            {
                icon: 'home-o',
                text: '示例1',
                url: '/index/index'
            },
            {
                icon: 'search',
                text: '示例2',
                url: '/index/index2'
            },
        ]
    },

    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}`)
            });
        }
    }
});

• custom-tab-bar/index.json文件

{
  "component": true,
}

参考文章

1. 自定义 tabBar
2. tabbar