评论

✨分享一个【自定义导航按钮】组件包,安装后一行代码实现自定义导航按钮

✨分享一个【自定义导航按钮】组件包,安装后一行代码实现自定义导航按钮

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


效果如下:



源码下载地址:




安装方法:


步骤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对应要跳转的页面





说明:组件为本人编写,如有好的建议欢迎讨论!















最后一次编辑于  2019-12-28  
点赞 2
收藏
评论
登录 后发表内容