🚀前言

在当今移动互联网时代，用户体验至关重要，而一个简洁高效的UI界面是提升用户满意度的重要因素之一。作为开发者，我们总是在寻求更便捷、更灵活的解决方案，以便快速构建出优质的应用界面。WeUl库正是这样一个强大的工具，它提供了一系列丰富的UI组件，让开发过程更加轻松便捷。

本篇文章将聚焦于WeUl库中的两个核心组件——导航栏和搜索栏。导航栏作为应用界面的骨架，负责引导用户在各个页面之间快速切换，而搜索栏则是提升信息检索效率的利器。通过合理运用这两个组件，我们可以显著改善用户的交互体验。

在接下来的内容中，我们将详细介绍WeUl库中的导航栏和搜索栏组件的使用方法与实践技巧，帮助您在项目中快速上手并灵活运用这些组件。无论您是新手开发者还是经验丰富的工程师，这篇文章都将为您提供宝贵的参考和指导。让我们一同探索WeUl库的魅力，打造出更加出色的应用界面吧！

🚀一、WeUl库中的导航栏与搜索栏组件

🔎1.NavigationBar 组件

NavigationBar组件用来自定义导航栏。在使用之前，我们需要设置页面的导航风格，如下所示：

"navigationStyle": "custom"

之后，运行代码并进入此页面，会发现页面中的默认导航栏已经消失了。

引入NavigationBar组件的路径如下：

"weui-miniprogram/navigation-bar/navigation-bar"

编写如下的测试代码：

<mp-navigation-bar title="导航栏标题" back="{{true}}" show="{{true}}"></mp-navigation-bar>

运行代码，效果如图所示。

NavigationBar组件支持的属性如表所示。

NavigationBar也支持通过插槽对某些部分进行定制，这些插槽如下表所示。

🔎2.Tabbar组件

Tabbar组件是自定义的标签栏组件，其引入路径如下：

"weui-miniprogram/tabbar/tabbar"

编写如下示例代码：

<mp-tabbar style="position:fixed;width:100%;bottom:0;" list="{{list}}" bindchange="tabChange"></mp-tabbar>

// index.js

Page({
  data: {
    list: [
      {
        text: '栏目1',
        "iconPath": "/image/icon_component.png",
        "selectedIconPath": "/image/icon_component_HL.png",
        badge: '8'
      },
      {
        text: '栏目2',
        "iconPath": "/image/icon_component.png",
        "selectedIconPath": "/image/icon_component_HL.png",
        badge: 'new'
      },
      {
        text: '栏目3',
        "iconPath": "/image/icon_component.png",
        "selectedIconPath": "/image/icon_component_HL.png",
        dot: true
      },
      {
        text: '栏目4',
        "iconPath": "/image/icon_component.png",
        "selectedIconPath": "/image/icon_component_HL.png",
      }
    ]
  },
  tabChange(e) {
      console.log('tab change', e)
  },
})

运行代码，效果如图所示。

在标签栏中，也可以为每一个标签设置不同的图标，每个标签内可以设置角标方案。Tabbar组件支持的属性如表所示。

🔎3.Searchbar 组件

Searchbar 组件，引用路径为：

"weui-miniprogram/searchbar/searchbar"

示例代码：

<mp-searchbar placeholder="查找朋友"></mp-searchbar>

下面展示了 Searchbar 组件的示例效果。

🔎4.小结

WeUI组件库中提供的所有组件我们都可以将其理解为一个自定义组件。读者也能逐渐意识到，在开发过程中，随着项目的迭代和扩展，通用组件库会越来越多，将其封装为自定义组件是一个非常好的选择。积极的自定义组件多了，就可以作为一个完整的组件库在多个小程序项目中使用。