微信小程序自定义标签栏(TabBar) 组件

微信小程序自定义标签栏(TabBar) 组件

支持无文字图标、大图标、悬浮图标等。

源码下载:https://github.com/tanggaowei/weapp-tabbar

微信小程序自定义标签栏(TabBar) 组件_第1张图片

自定义标签栏组件的代码在 /commpents/tabbar 目录下,可以直接复制到其他项目里使用。下面讲述使用方法。

1、引用组件

在需要使用标签栏的页面的 json 文件中,使用 usingComponents 配置项引用标签栏组件:

{
  "usingComponents": {
    "tabbar": "/components/tabbar/tabbar"
  }
}

2、添加组件

现在 wxml 文件里添加组件:


然后在 js 文件中定义组件的数据,如 tabbar:

Page({
  data: {
    tabbar: {
      "color": "#999999",
      "selectedColor": "#7788dd",
      "borderStyle": "#dcdcdc",
      "backgroundColor": "#ffffff",
      "list": [{
          "key": "home",
          "iconPath": "/images/icon_home.png",
          "selectedIconPath": "/images/icon_home_active.png",
          "text": "首页"
        },
        {
          "key": "tag",
          "iconPath": "/images/icon_tag.png",
          "selectedIconPath": "/images/icon_tag_active.png",
          "text": "标签"
        },
        {
          "key": "new",
          "iconPath": "/images/icon_plus_big.png",
          "iconType": "big overflow circle shadow",
          "choose": "disable"
        },
        {
          "key": "notebook",
          "iconPath": "/images/icon_notebook.png",
          "selectedIconPath": "/images/icon_notebook_active.png",
          "text": "日记本"
        },
        {
          "key": "me",
          "iconPath": "/images/icon_me.png",
          "selectedIconPath": "/images/icon_me_active.png",
          "text": "我"
        }
      ]
    }
  }
})

自定义标签栏组件的数据格式和小程序原始标签栏相同。这里重点讲述新属性 iconTypechoose 的使用。

iconType 一共有4个值:bigoverflowcircleshadow。这四个值可以单独使用,也可以同时使用。同时使用时用空格隔开(实际上会被填写到对应标签的 class 属性中)。它们的作用如下:

  • big 使用大图标,将图标的宽和高设置为 95rpx,和标签栏的高相等;
  • overflow 将图标上移,使其一部分在标签栏外面显示;
  • circle 将图标的图片截取为圆形;
  • shadow 给图标加阴影。

choose 属性一共有两个值:enable 和 disable,默认为 enable。当将其设置为 disable 时,点击该标签项将不会改变标签栏的选中状态,但仍然会触发 change 事件。

3、监听切换事件

使用 bindchange 属性绑定监听事件:


然后在 Page() 中实现监听方法:

  tabChange: function(e) {
    var key = e.detail.key
    if (key == 'new') {
      wx.navigateTo({
        url: '/pages/new/new',
      })
    } else {
      this.setData({
        choose_index: e.detail.index
      })
    }
  }

监听方法会得到两个数据:e.detail.keye.detail.index。其中 e.detail.key 对应数据 tabbar.list 数组元素的 key 值,不如上面的 home 、tag、new、notebook 和 me。e.detail.index 对应该数组元素的序号,如 0、1、2、3、4。

4、实践方案

1)自定义组件

自定义组件类似于页面,拥有自己的 wxml 模版和 wxss 样式,便于逻辑与视图分离,比直接使用模板要好。下面是在 index.wxml 中使用自定义组件进行切换的示例代码:







其中 是 4 个自定义组件,分别实现各自的功能。

2)使用模板

使用模板也能实现切换效果,但是逻辑代码可能要写在同一个页面。例如:












3)导航和跳转

可以在监听方法中使用 wx.navigateTo()wx.redirectTo() 接口切换页面内容。例如:

  tabChange: function(e) {
    var key = e.detail.key
    if (key == 'new') {
      wx.navigateTo({
        url: '/pages/new/new',
      })
    }
  }

你可能感兴趣的:(微信小程序)