小程序商城开发-tabbar

最新推荐文章于 2021-08-21 04:38:16 发布

原创最新推荐文章于 2021-08-21 04:38:16 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

小程序专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了在项目中实现自定义TabBar的过程，包括配置入口文件、解决图标加载问题及设置生命周期方法。通过示例代码展示了如何在index.js中初始化selected状态并定义switchTab方法，同时解释了组件所在页面生命周期的利用。

自定义tabbar

现在项目根目录配置以下入口文件
custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

因为路径问题所以icon图片一直加载不成功…以下是目录和index.js中正确的路径配置

在这里插入图片描述

list:[{
        "pagePath":"/pages/index/index",
        "iconPath":"/images/菜单栏_首页_未选中.png",
        "selectedIconPath":"/images/菜单栏_首页_选中.png"
      }]

生命周期

组件所在页面的生命周期,特殊的生命周期，它们并非与组件有很强的关联，但有时组件需要获知，以便组件内部处理。这样的生命周期称为“组件所在页面的生命周期”，在 pageLifetimes 定义段中定义。其中可用的生命周期包括：

pageLifetimes:{
show(){} //	组件所在的页面被展示时执行
}

在page页面的js文件中使用

Component({
    pageLifetimes: {
    show() {
      if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
          selected:number
          //number对应在custom-tab-bar文件夹中的js中的list列表中data:{  list:[{}] }中list数组的下标
          //getTabBar（）通过 getTabBar 接口获取组件实例，调用 setData 更新选中态。
        })
      }
    }
  }
})

custom-tab-bar/index.js中初始化好selected，定义方法switchTab

switchTab(e){
			const data=e.currentTarget.dataset
			const url=data.path
			wx.switchTab({url})
			this.setData({
				selected:data.index
			})
		}

<cover-view wx:for="{{list}}" wx:key="index" class="tab_bar_item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">

<cover-image src="{{selected===index?item.selectedIconPath:item.iconPath}}" class="image">
</cover-imag