✨分享一个【自定义导航按钮】组件包,安装后一行代码实现自定义导航按钮
今天给大家分享一个自己写的【自定义导航按钮】组件包。下方有开源下载地址，觉得好用的拿走😝
效果如下：
源码下载地址：
安装方法：
步骤1：
将组件包下载解压到小程序项目根目录
步骤2：
在需要使用组件的页面JSON文件中添加声明组件
步骤3：
在需要使用组件的页面wxml文件任意位置添加代码（该组件有固定位置CSS，z-index:20000),保存即可使用了
步骤4：（组件不进行配置任何即可直接使用，详细配置可以更改按钮图片和按钮点击的方法）
属性列表：
属性 类型 默认值 必填 说明
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
buttons <span style="color: rgb(53, 53, 53); font-size: 14px;">array<object></span> 主页按钮 否 各个按钮的数据Map
分享按钮
返回顶部
客服按钮
电话按钮
buttons提供按钮组配置，每一项表示一个按钮，每一项的属性为
属性 类型 默认值 必填 说明
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
type string 是 <span style="color: rgb(53, 53, 53); font-size: 14px;">按钮的类型：详见下方type的合法值</span>
icon string 是/否 <span style="font-size: 16px;">按钮type类型非index,share,toTap,contact,tel时必填</span>
value string 是/否 按钮type类型为tel,<span style="color: rgb(0, 0, 0);">navigateTo,redirectTo,</span>
switchTab,reLaunch时必填
type的合法值：
说明
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
index 返回主页按钮，自带图标，不填value时，默认返回‘/pages/index/index’页，
share 页面分享按钮，自带图标，点击分享页面
toTop 返回页面顶部按钮，自带图标，点击返回页面顶部
contact 调起客服按钮，自带图标，点击进入客服对话
tel 拨打电话按钮，自带图标，点击拨打电话，value对应要拨打的电话号码
navigateTo 调转页面按钮，不带图标，点击跳转指定页面，对应原生wx.<span style="font-size: 16px;">navigateTo方法，value对应要跳转的页面</span>
navigateBack <span style="font-size: 16px;">返回上一页面按钮，不带图标，点击返回上一页</span>
redirectTo 关闭当前页跳<span style="font-size: 16px;">转到页面按钮，不带图标，点击跳转指定页面，对应原生wx.redirectTo方法，value对应要跳转的页面</span>
reLaunch <span style="font-size: 16px;">关闭所有页面跳转到页面按钮，不带图标，点击跳转指定页面，对应原生wx.reLaunch 方法，value对应要跳转的页面</span>
switchTab <span style="font-size: 16px;">跳转到tabBar页面按钮，不带图标，点击跳转指定页面，对应原生wx.switchTab 方法，value对应要跳转的页面</span>
说明：组件为本人编写，如有好的建议欢迎讨论！
强力驱动