手把手教你怎么实现微信小程序自定义底部导航栏

微信小程序自定义底部导航栏怎么实现?下面本篇文章给大家介绍一下自定义底部导航栏的具体实现方法,希望对大家有所帮助!

手把手教你怎么实现微信小程序自定义底部导航栏

微信支持自定义导航栏来实现灵活的底部导航栏,在官方文档中给出了简单的描述,但不是太具体,这里我通过手把手的具体代码实现,来帮助大家完成自定义底部导航栏的具体实现。【相关学习推荐:小程序开发教程】

引入colorui

https://github.com/weilanwl/ColorUI

访问该网址,将colorui组件库下载下来

1.png

下载下来后,将demo文件夹中的colorui文件夹放入你的小程序项目中

2.png

3.png

设置引入

@import 'colorui/main.wxss';@import 'colorui/icon.wxss';@import 'colorui/animation.wxss';

登录后复制

将上面这段代码放入app.wxss文件中(上面代码路径根据自己实际路径填写

colorui就引入成功了,我这里是使用colorui的样式组件,其实用别的也一样,或者自己写底部导航栏的样式都可以

创建自定义底部导航栏组件

我们首先创建一个自定义组件文件夹**custom-tab-bar,**切记,自定义底部导航栏的文件夹名必须是这个,不能改成别的,否则小程序是识别不了的。

4.png

接着我们在Pages下面创建两个页面(home,my),用来当作导航栏的两个切换页面

4.png

5.png

app.json文件设置

不使用小程序默认的导航栏设置,就需要在app.json文件中设置tabBar的custom的属性为true

具体代码如下:

"tabBar": {    "custom": true,    "list": [      {        "pagePath": "pages/home/home",        "text": "首页",        "iconPath": "images/icon/basics.png",        "selectedIconPath": "images/icon/basics_cur.png"      },      {        "pagePath": "pages/my/my",        "text": "我的",        "iconPath": "images/icon/component.png",        "selectedIconPath": "images/icon/component_cur.png"      }    ]  },

登录后复制

在这里需要注意的是,list也是需要设置的,list中pagePath就配置你需要配置的tab具体页面,这里我只设置了两个tab,所以就配了两个,配置了几个就要在这配几个,一个都不能少,list除了pagePath,其他字段可根据自己的需要进行增减。

编写导航栏具体代码逻辑

导航栏组件具体实现

1、组件初始数据设置

**// custome-tab-bar/index.js**/**   * 组件的初始数据   */  data: {    selected: 0,    list: [{        "pagePath": "/pages/home/home",        "text": "首页",        "iconPath": "/images/icon/basics.png",        "selectedIconPath": "/images/icon/basics_cur.png"      },      {        "pagePath": "/pages/my/my",        "text": "我的",        "iconPath": "/images/icon/component.png",        "selectedIconPath": "/images/icon/component_cur.png"      }    ]  }

登录后复制

这里可以看到和app.json中的设置大致差不多,但是真正的list数据其实取得是这里的,而不会去取app.json的,这就是实现自定义组件的关键,所以大家可能就有疑问,既然用不到app.json,为什么还要在app.json中设置,我这里查了下,这是小程序的规范要求,我们只能遵从。

2、组件导航栏页面代码实现

                    {{item.text}}  

登录后复制

这里是使用的colorui的样式,我们根据list每条数据的索引位与选中的值进行比较来做到按钮的样式切换效果,通过switchTab切换事件来实现tab页的切换。

3、组件切换事件代码实现

/**   * 组件的方法列表   */  methods: {    switchTab(e) {      const data = e.currentTarget.dataset      const url = data.path          wx.switchTab({        url      })      this.setData({        selected: data.index      })    }  }

登录后复制

调用微信提供的wx.switchTab方法完成url跳转,同时记录当时选中的索引值。

写到这里我们的组件这块的代码就写完了,接着具体页面也要针对按钮切换设置相应逻辑

4、tab具体页面代码实现

// pages/my/my.js/**   * 生命周期函数--监听页面显示   */  onShow: function () {    console.log("onShow")    if (typeof this.getTabBar === 'function' && this.getTabBar()) {      this.getTabBar().setData({        selected: 1      })    }  },

登录后复制

通过onShow的页面生命周期函数来设置selected的值,因为我的页面是第二个tab,所以索引值设置为1.自定义组件 微信有新增 getTabBar 接口,可获取当前页面下的自定义 tabBar 组件实例,就可以设置组件中selected的值。home页面也是同样的设置,索引值根据实际情况跳转一下即可。

最终效果呈现

通过上面代码的实现,整个自定义底部导航栏就实现了,其实整体实现还是比较简单的。让我们来看下效果

7.png

更多编程相关知识,请访问:编程视频!!

以上就是手把手教你怎么实现微信小程序自定义底部导航栏的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/1510179.html

(0)
上一篇 2025年2月18日 04:42:18
下一篇 2025年2月18日 04:42:36

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • UniApp实现自定义刷新与加载效果的设计与开发指南

    uniapp实现自定义刷新与加载效果的设计与开发指南 引言:UniApp是一个基于Vue.js开发的跨平台应用开发框架,它可以将一套代码同时运行在多个平台上,如iOS、Android、H5等。在移动应用开发中,下拉刷新和上拉加载更多是非常常…

    编程技术 2025年5月1日
    000
  • UniApp报错:无法找到’xxx’导航栏的解决方案

    随着移动应用开发技术的快速发展,UniApp作为一款跨平台开发框架,无疑已经成为了很多开发者的首选。然而在使用UniApp开发过程中,报错也是难免的。其中,无法找到导航栏的报错常常会使人头疼。那么,我们该如何解决UniApp报错:无法找到&…

    2025年5月1日
    000
  • 实用技巧:在Laravel中自定义中文验证规则

    在Laravel开发过程中,一般情况下,我们会使用框架提供的默认验证规则来验证用户输入的数据,但有时候我们需要自定义一些特定的验证规则来满足业务需求。本文将介绍如何在Laravel中自定义中文验证规则,并给出具体的代码示例。 1. 了解Va…

    2025年4月2日
    200
  • Vue3中的render函数:自定义渲染函数

    vue是一款流行的javascript框架,它提供了许多方便的功能和api以帮助开发者构建交互式的前端应用程序。随着vue 3的发布,render函数成为了一个重要的更新。本文将介绍vue3中render函数的概念、用途和如何使用它自定义渲…

    编程技术 2025年4月1日
    100
  • Vue文档中的自定义过滤器函数步骤分析

    vue.js是一款流行的前端框架,它提供了一系列的功能和特性,并且非常容易上手和使用。其中之一便是自定义过滤器函数。本文将对vue文档中的自定义过滤器函数步骤进行分析。 首先,在Vue中自定义过滤器函数分为全局和局部两种方式。全局过滤器可以…

    编程技术 2025年4月1日
    200
  • photoshop利用自定义画笔制作逼真漂亮的毛线衣

    效果图毛线比较多,其实都是由一个非常简单的图形笔刷画出来的。制作的时候只需要先定义这款画笔,然后画出实物的轮廓,用画笔画一条毛线,并用图层样式等加上颜色及浮雕效果。把得到的毛线复制,改色得到整块毛织效果。后期把纹理应用到实物中,适当变形及调…

    2025年4月1日 编程技术
    100
  • photoshop 流线型导航栏

    网页设计导航条中有一些是下图这样的形状,我们可以用photoshop的形状工具、路径和自由变形快速做出来。    在Photoshop中用形状工具画一个圆角矩形,注意一定要选择路径模式:    用路径选择工具选择左下角的2个锚点:    按…

    2025年4月1日 编程技术
    100
  • 自定义html中Progress的样式

    progress 元素是 html5 标准草案中新增的元素之一,w3c 关于此元素的定义请猛击这里。默认情况下,progress 会生成一个和系统默认样式一样的新增。webkit 中对于 progress 的默认样式定义在这里可以找到。在 …

    2025年4月1日
    200
  • 自定义列表项 list-style 使用小结

        今天给某公司做招聘专页。早上完成设计图,下午开始排版。页面套用了我之前做的某人才局的招聘页面,导航栏、banner 很快就出来了。这次内容里我有些地方用了列表,当然要用 标签。列表项(小圆点)做成绿色的小正方块,这时我想是不是有一个…

    编程技术 2025年4月1日
    100
  • html中单选框样式自定义的示例

    html中单选框样式自定义的示例: nbsp;html>            Title     .choice{ position: relative; } .choice .radio{ position: relative; …

    编程技术 2025年4月1日
    100

发表回复

登录后才能评论