【愚公系列】《微信小程序与云开发从入门到实践》028-WeUl库中的导航栏与搜索栏组件

原创

愚公搬代码

发布于 2025-01-20 23:59:58

8270

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

🚀前言

在当今移动互联网时代，用户体验至关重要，而一个简洁高效的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组件支持的属性如表所示。

属性名	类型	含义
ext-class	字符串	设置组件的class类名
title	字符串	设置导航栏的标题
back	布尔值	设置是否显示默认的返回按钮
delta	数值	当back属性设置为true时，设置返回的页面层数，默认为1
background	字符串	设置导航栏的背景色
color	字符串	设置导航栏的文字等颜色
loading	布尔值	设置是否在标题左侧显示loading
show	布尔值	设置导航栏是否显示
animated	布尔值	设置导航栏是否显示和隐藏过程中是否显示动画效果
bindback	函数	绑定在用户点击默认的返回按钮的回调事件

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

插槽名	含义
left	导航栏左侧区域插槽，与导航栏的back属性冲突，不能同时使用
center	导航栏中间区域插槽，与导航栏的title属性冲突，不能同时使用
right	导航栏右侧区域插槽

🔎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组件支持的属性如表所示。

属性名	类型	含义
ext-class	字符串	设置组件的class类名
list	数组	设置标签栏中的每个标签
current	数值	设置当前选中的标签
bindchange	函数	绑定选中的标签发生变化的回调事件

🔎3.Searchbar 组件

Searchbar 组件，引用路径为：

"weui-miniprogram/searchbar/searchbar"

示例代码：

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

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

属性名	类型	意义
ext-class	字符串	设置组件的 class 类名
focus	布尔值	设置初始化后是否处于激活状态
placeholder	字符串	设置搜索框中的提示文案
value	字符串	设置搜索框中的默认文案
search	函数	输入过程中，此回调函数会被不停地调用
throttle	数值	设置 search 函数的调用最小间隔时间，单位为毫秒
cancelText	字符串	设置取消按钮的标题
cancel	布尔值	设置是否显示取消按钮
bindfocus	函数	绑定搜索框激活时的回调事件
bindblur	函数	绑定搜索框失活时的回调事件
bindclear	函数	绑定清除按钮点击的回调事件
bindinput	函数	绑定在搜索框输入过程中的回调事件
bindselectresult	函数	绑定选择搜索结果时的回调事件

🔎4.小结

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

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S11#重启人生

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S11#重启人生

登录后参与评论

0 条评论

热度