大众点评

自定义头部的实现

思路：

1.样式布局

小程序自带导航栏样式，但是在此小程序中，城市定位和搜索框都处在导航栏样式中，据查看开发文档，可以自定义导航栏样式，使用页面配置中的navigationStyle属性，属性值为custom，就可以设置在导航栏中，出去胶囊按钮不可自定义，其中城市定位采用微信小程序API：wx. getLocation实现，输入框则采用自定义组件input组件搭配flex布局实现

效果图如下：

2.头部多端适配

小程序为了适应不用的移动终端，需要给头部的样式进行适配，这里因为张总对右上角的胶囊做了所有终端适配，我们可以根据起胶囊的位置来定位我们头部其他样式，这其中就需要使用到小程序API： wx.getMenuButtonBoundingClientRect，此API会返回一个其胶囊在整个页面的位置以及宽高，我们可以根据胶囊的宽高和位置动态的设置我们左边定位和输入框的位置和宽度.

代码实现如下

效果展示

小程序整体页面展示

壳牌加油站

持续更新中...!!