微信小程序：使用iView Weapp 循环创建自定义的tabbar（图文并茂）

Posted 2022-03-16 温柔且上进c

使用iView Weapp 循环自定义创建tabbar

• • 注意：
  • 下载iView Weapp组件库
  • 创建微信小程序并将文件放在根目录
  • 引入所需组件
  • 全局配置文件中设置tabbar
  • • 根据小程序官方文档创建自定义tabbar组件文件
    • 自定义tabbar组件
    • 跳转页面配置
  • 成果展示：

注意：

• 官网内容中并没有循环创建tabbar的方法，以下内容为博主自己网上查资料，摸索出来的，可能方法并不是最优的，但可以保证按照此方法一定可以循环创建tabbar

下载iView Weapp组件库

• iView Weapp官方地址：官方网站
• 从官网进入 GitHub地址下载组件库的zip文件
  
• 解压后文件夹目录如下：
  
• 我们使用此组件库时，只需要将上述红色圈出的文件夹，放到我们创建的微信小程序项目的根目录下即可

创建微信小程序并将文件放在根目录

• 创建初始微信小程序：不使用云服务，使用JavaScript基础模板
  
• 博主是将初始的index页面与logs页面删除，再创建新的我们所需要的页面，接下来我们以创建了三个页面举例 (auth主页、notice消息、home我的)
• 微信小程序删除页面时，首先需要将app.json中的pages页面配置内容删除，再将页面文件删除
• 作为这一步，还需要在app.json删除一个配置内容（删除下述内容）：

# app.json中
"style": "v2",

• 删除的原因是：小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱
• 最后创建新的页面，并将dist文件添加到项目的根目录：
  

引入所需组件

• 在项目配置文件app.json中引入我们所需要的组件：
• 组件路径一定要写对！！！前两个是tabbar组件，最后一个是icon图标组件，可以美化tabbar标签的图标

  "usingComponents": 
      "i-tab-bar": "/dist/tab-bar/index",
      "i-tab-bar-item": "/dist/tab-bar-item/index",
      "i-icon": "/dist/icon/index"
  

全局配置文件中设置tabbar

• 添加custom字段值为true，并将其余tabbar配置补充完整

    "tabBar": 
        "custom": true,
        "list": [
            
                "pagePath": "pages/auth/auth",
                "text": "首页"
            ,
            
                "pagePath": "pages/notice/notice",
                "text": "通知"
            ,
            
                "pagePath": "pages/home/home",
                "text": "我的"
            
        ]
    ,

根据小程序官方文档创建自定义tabbar组件文件

• 文件名必须为custom-tab-bar并且必须也放在项目的根目录，如下创建
  
• 整个项目文件目录现在已经确定如下：
  

自定义tabbar组件

• 在custom-tab-bar目录下的index.wxml文件创建如下：

<i-tab-bar current=" current " color="#f759ab" bindchange="handleChange" >
    <block wx:for="list" wx:key="*this">
        <i-tab-bar-item  key="item.status" icon="item.iconPath" current-icon="item.selectedIconPath" title="item.text"></i-tab-bar-item>
    </block>
</i-tab-bar>

• current：当前所在标签的key值、list：index.js文件中定义的数据集、color：主题色、bindchange：切换标签时触发的事件、key：标签的唯一标识、icon：标签的图标、current-icon：标签被选中时的图标、title：标签的名字
• index.js文件如下：

Component(
    data: 
        //当前页索引
        current: 'auth',
        list: [
                pagePath: "/pages/auth/auth",
                text: "首页",
                status:'auth',
                iconPath: 'homepage',
                selectedIconPath: 'homepage_fill',
            ,
            
                pagePath: "/pages/notice/notice",
                text: "通知",
                status:'notice',
                iconPath: 'interactive',
                selectedIconPath: 'interactive_fill'
            ,
            
                pagePath: "/pages/home/home",
                text: "我的",
                status:'home',
                iconPath: 'group',
                selectedIconPath: 'group_fill'
            
        ]

    ,
    methods: 
        handleChange(e) 
            console.log(e);
            let index=e.detail.key;
            this.setData(
                current:index
            )
            wx.switchTab(
              url: '/pages/'+e.detail.key+'/'+e.detail.key,
            )
        ,
        //小程序切换页面

    
)

• 普通页面js文件的对象是Page对象，而自定义组件只能为Component对象，并且点击触发的事件只能在methods中
• 最后还需要在组件文件中的index.json文件中配置：

"component":true

跳转页面配置

• 最后在我们创建的的三个页面中配置js文件，原因： 为了防止图标切换时的乱跳与闪烁问题！！
• 在js文件中的onShow生命周期函数中添加配置：

// home.js
 this.getTabBar().setData(
     current:'home'
 ) 

// notice.js
 this.getTabBar().setData(
     current:'notice'
 ) 

// auth.js
 this.getTabBar().setData(
     current:'auth'
 ) 

成果展示：