微信小程序 自定义导航组件 nav头部 全面屏设计（微信小程序怎么弄出来）

微信小程序 自定义导航组件 nav头部 全面屏设计（微信小程序怎么弄出来）

nav-dynamic

微信小程序自定义nav头部组件；适配全面屏设计；

实现功能

初始进入页面时，展示初始状态下的nav样式；页面滚动时，监听页面滚动事件，展示滚动状态下的nav样式；根据配置字段值、页面栈数量，展示“返回”图标；根据配置字段值、页面栈数量，展示“首页”图标，同时配置“首页路径”；设置组件插槽，允许开发者在组件上添加任意元素；

方法说明

getNavHeight()

获取导航栏高度；单位px;

setOptions(options)

设置组件参数；

options Object

scrollHandle(scrollTop)

页面滚动事件回调；调用这个方法可实现nav组件动态改变样式

插槽用法

插槽名称

ant-nav-slot

插槽用法

我是插槽

使用栗子

1、在app.json中全局配置组件

"usingComponents": { "comp-nav-dynamic": "/components/nav-dynamic/nav-dynamic"},

2、在页面的wxml中引入组件

3、在页面的js中使用 this.selectComponent('#comp-nav-dynamic') 方法获取组件实例，并调用setOptions方法配置参数；然后在页面的onLoad生命周期中调用；当页面有滚动修改nav组件样式需求时，在页面的onPageScroll的页面方法中，调用实例的scrollHandle方法；

Page({ data: { navHeight: 0, }, onLoad() { this.setNav(); }, setNav() { this.selectComponent('#comp-nav-dynamic').setOptions({ navBackgroundInit: '#000000', // 导航栏背景颜色-初始值 navBackgroundRoll: '#ffffff', // 导航栏背景颜色-滚动值 titleColorInit: '#ffffff', // 文本颜色-初始值 16进制 titleColorRoll: '#000000', // 文本颜色-滚动值 16进制 titleTextInit: '初始标题', // 标题文字-初始值 titleTextRoll: '滚动标题', // 标题文字-滚动值 historyShow: true, // 历史图标是否显示 scrollMin: 50, // 最小滚动间距，单位px scrollMax: 200, // 最大滚动间距，单位px homeShow: true, // home图标是否显示 homeJudgeStack: false, // home图标显示是否判断页面栈 homePath: '/pages/index/index', // home页面路径 homeColorInit: 'white', // home图标颜色-初始值 white / black homeColorRoll: 'black', // home图标颜色-滚动值 white / black }) this.setData({ navHeight: this.selectComponent('#comp-nav-dynamic').getNavHeight(), }) }, onPageScroll(e) { this.selectComponent('#comp-nav-dynamic').scrollHandle(e.scrollTop); },})

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。