今天给大家分享一个自己写的【自定义导航按钮】组件包。下方有开源下载地址，觉得好用的拿走😝

效果如下：

源码下载地址：



安装方法：

步骤1：

将组件包下载解压到小程序项目根目录

步骤2：

在需要使用组件的页面JSON文件中添加声明组件

步骤3：

在需要使用组件的页面wxml文件任意位置添加代码（该组件有固定位置CSS，z-index:20000),保存即可使用了

步骤4：（组件不进行配置任何即可直接使用，详细配置可以更改按钮图片和按钮点击的方法）

属性列表：

属性 类型 默认值 必填 说明

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

buttons array<object> 主页按钮 否 各个按钮的数据Map

分享按钮

返回顶部

客服按钮

电话按钮

buttons提供按钮组配置，每一项表示一个按钮，每一项的属性为

属性 类型 默认值 必填 说明

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

type string 是 按钮的类型：详见下方type的合法值

icon string 是/否 按钮type类型非index,share,toTap,contact,tel时必填

value string 是/否 按钮type类型为tel,navigateTo,redirectTo,

switchTab,reLaunch时必填

type的合法值：

说明

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

index 返回主页按钮，自带图标，不填value时，默认返回‘/pages/index/index’页，

share 页面分享按钮，自带图标，点击分享页面

toTop 返回页面顶部按钮，自带图标，点击返回页面顶部

contact 调起客服按钮，自带图标，点击进入客服对话

tel 拨打电话按钮，自带图标，点击拨打电话，value对应要拨打的电话号码

navigateTo 调转页面按钮，不带图标，点击跳转指定页面，对应原生wx.navigateTo方法，value对应要跳转的页面

navigateBack 返回上一页面按钮，不带图标，点击返回上一页

redirectTo 关闭当前页跳转到页面按钮，不带图标，点击跳转指定页面，对应原生wx.redirectTo方法，value对应要跳转的页面

reLaunch 关闭所有页面跳转到页面按钮，不带图标，点击跳转指定页面，对应原生wx.reLaunch 方法，value对应要跳转的页面

switchTab 跳转到tabBar页面按钮，不带图标，点击跳转指定页面，对应原生wx.switchTab 方法，value对应要跳转的页面

说明：组件为本人编写，如有好的建议欢迎讨论！