微信小程序设置子母导航

微信小程序设置子母导航步骤如下1、页面主要是围绕scroll-view来实现大体功能。在wxml定义scroll-view标签，设置允许纵向滚动，同时设置页面高度为获取屏幕高度且不允察塌许下拉刷新，这样用户所有的 *** 作都会在我们所定义的区域内完成。1，在App.js中获取屏幕高度2、在js文件中定义数据源，也可以通过接口的方式返回，来绘制A-Z的字母列表。在js文件onLoad事件中通过遍历，得到一个26位首字母的数组，并将其在页面进行渲染显示。图片3.2，在页面JS得到一个26位败前圆字母的数3、通过响应触摸响应事件的监听回调悔激，获取到首字母。在wxml中给渲染字母的容器增加bindtouchstart、bindtouchend、catchtouchmove等事件，可以的话可以再加上一个选择悬浮显示，让界面更加友好及便利。4、将监听回调获取到的首字母进行匹配渲染与scrollview结合起来。

一、在 app.json 的 window 对象中定义导航的样式：

这样你会发现所有页面的导航栏都不见了。如果还有其他页面需要导航栏的，那就模仿小程序的导航栏早悔御按照以下步骤。

二、首先要在 app.js 的 onLaunch 方法里面获取手机状态栏高度，全局定义导航高度 navHeight ：

注意！！！全局定义导航高前明度 navHeight ！！！

我发现很多人会遇到 navHeight 是 undefined 这个问题。在这里说明一下，这个 navHeight 需要在 app.json 里面定义好：

三、在需要导航的 页面 Page 拿到全局变量导航高度：

四、页面展示：

五陆岩、附上样式，可以写在 app.wxss ：

六、界面效果：

小程序可以在页面里做底部导航的。

扩展内容：

小程序的6大优势：

1、方便快捷，即烂槐州用即走。不需要在下载什么APP啦，既费流量，又占空间内存。小程序就是方便，即用即走。

2、速度快、不占内存因为小程序前端代码都是存在微信服务器上的，在腾讯云端存放呢，所以无需加载，直接就打开了，速度也比较快。并且还不占用手机内存。

3、安全稳定、保密性强其实小程序就类似苹果商店，首先需要审核才能发布。其次小程序通信采用的是https访问，SSL加密通信，并且小程序样式代码都封装在微信小程序里面，所以安全性更高，更稳明蔽定。

4、功能丰富，场景丰富可以调用比H5更多的手机系统功能来进行开发，例如GPS定位、录音、视上传视频、添加图片等，能开发更丰富的使用场景。

5、开发成本低、维饥蔽护简便同样的功能，做一个APP估计需要十几万甚至几十万，而开发一个小程序，一般几千元就搞定了。维护起来也比较简单方便。

6、附近定位、入口众多开放的入口比较多，除了通过扫码，发送朋友，搜索，附近等常用入口外，还能与公众号关联，群发文章嵌入，公众号菜单链接等。

---