这又是什么问题呢？我们先来看看官方文档的描述

这里给大家解释一下，滚动分为页面滚动跟区域滚动，而区域是多高呢？则需要通过CSS设置一个固定高度，比如设置height：500px，则在高度500px内触发scroll-view区域滚动。
（注意：这里设置的高度需要是固定值px）

这里举个例子，比如手机竖屏长度是1000px，在这个页面的内容（组件）堆叠长度已经超过1000px，则会触发页面滚动，相应的右侧也会出现滚动条。

而当区域滚动的长度大于了页面滚动后，无论怎么滚动（拖动屏幕），触发的都是页面滚动！

所以当默认触发页面滚动后，区域滚动是不管用的，而且这时候下拉还会触发scroll-view的下拉刷新。

解决办法：设置scroll-view的高度小于页面高度或者等于页面高度（根据需求自行设计，不超过页面高度就行）

下面附带计算除去导航栏和tabBar的页面高度的代码：

// #ifdef MP-WEIXIN
// 导航栏的高度
let custom = uni.getMenuButtonBoundingClientRect();
Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
// #endif
// scroll-view高度
uni.getSystemInfo({
	// 50是tabBar的高度
	success: (res) => {
		this.verticalNavHeight = res.screenHeight - this.CustomBar - 50
如果想知道某个Dom元素的高度：
 
const query = uni.createSelectorQuery().in(this)
		query.select("#first-search").boundingClientRect(data => {
		console.log(data)
			this.searchHeight = data.height
		}).exec()
                           在使用HbuilderX开发微信小程序时（在HbuilderX中写代码，在微信开发者工具编译），由于微信小程序自带的导航栏功能少，样式单一等，于是采用colorUI自定义导航栏实现需求。而问题就一而再再而三的出现了：自定义导航栏导致系统自带的下拉刷新不能用（官方回应这是微信小程序的bug）采用HbuilderX自带的scroll-view组件的下拉刷新但scroll-view在微信小程序却出现了：无限刷新问题s
				
前几天分享了一个自己做的关于小程序组件扩展的开源项目（传送门） 
本来就是想给自己发布的第一个开源代码骗骗star，结果有不少善良的朋友给文章点赞了，搞得我有点不好意思，所以决定写点干货讲讲具体是怎么实现的。 
其实也比较简单，首先自定义组件下的 scroll-view 高度设为比组件本身高出 40px，即头部显示刷新文字的区域高度，然后让 scroll-view y轴偏移 -40px，这样刷新文字区域就在顶部看不到了，具体css如下：
.scroll-view {
height: calc(100% + 40px);
transform: translateY(-40px);
在做快狗打车小程序时，关于默认导航栏，我们遇到了以下的问题：
  Android、IOS手机对于页面title的展示不一致，安卓title的显示不居中
  页面的title只支持纯文本级别的样式控制，不能够做更丰富的title效果
  左上角的事件无法监听、定制
  路由导航单一，只能够返回上一页，深层级页面的返回不够友好
我们希望的是：在各个机型页面上title一致性 & 个性化展示、取得左上角点击事件控制权及深层级页面的一键返回
step1 自定义
第一步 取得导航栏的控制权
小程序支持自定义导航栏，只需要在app.json文件中，window项中配置
"navi
 * title: 导航栏标题
 * bgColor: 导航栏背景颜色，默认透明'transparent'
 * noSticky: 取消导航栏粘性布局(不占头部导航栏位置)，默认不取消
 * opacity: 导航栏透明度，默认1不透明
 * showNavBtn: 是否显示左侧导航按钮，默认true显示
 * navIcon: 用户自定义导航按钮图标路径
 * navHome: 导航按钮为主页home，与返回back互斥，默认false显示返回back
 * 外部样式类：(使用时注意权重，添加外部样式类无效果的时候，给类加点权重就可以了)
 * custom-icon-class: 标题左侧图标外部样式类
 * custom-title-class: 标题外部样式类
 * custom-root-class: 根节点外部样式类
 * 事件：
 * onBack: 用户点击左上角返回按钮后回调
 * onHome: 用户点击左上角Home按钮后回调
 * onIcon: 用户点击自定义icon
##问题2：下拉刷新触发了，但是我的导航栏（ios没有问题）随着下拉刷新一起下拉。
因为我是自定义的导航栏，所以如果你自定义了导航栏，那么系统原生的下拉刷新是没办法使用的。
只能自定义下拉刷新的动画。
通过微信组件scroll-view  调用bindscrolltoupper和bindscrolltolow
				
weapp-navigation-bar
因为小程序原生导航栏的一些限制，比如：不能设置字体大小，ios标题居中而安卓居左，从非首页启动小程序返回首页菜单不明显，屏幕空间不能最大化使用。因此微信开放了小程序自定义导航栏，允许用户最大化的使用屏幕空间。但是自定导航栏不支持只指定某些页面使用，而是全局的，所以也带来了一些适配问题。
本导航栏组件支持
可根据手机状态栏高度适配。
可自定义设置包括字体颜色、字体大小、背景颜色、无标题、导航栏是否置顶。
可自动识别是否首页launch。
1 自定义导航栏
2 模拟非首页启动小程序
3 设置导航栏跟随页面滚动
4 页面上下滚动指定像素值，切换导航栏的显示或隐藏
5 绑定返回按钮事件
6 绑定返回首页按钮事件
使用前需要了解和。
app.json配置以下属性
"window":{
    "navigationStyle"
				
使用bindscrolltolower，必须搭配使用的scroll-view会导致小程序"enablePullDownRefresh": true下拉不能使用。
解决方法，就是当两者同时存在时，改scroll-view为view，改bindscrolltolower为onReachBottom函数。
这样在上拉加载，跟下拉刷新同时存在的时候，"enablePullDownRefresh": t
在js中有一个函数是用来监听页面的滑动的，这个函数叫做onPageScroll，下面是我从官网上面查到的有关信息
我们可以利用这个函数的功能，获取页面在垂直方向已经滚动的距离，当滚动的距离达到一定数值时，我们通过js来改变样式，让原有的模块固定住不再移动
三、相关代码
1.说明（一定要看）
我把整个页面的代码全部拷过来了，wxml中最上面的部分是导航栏
				
微信小程序的导航栏可以通过修改页面的配置来实现自定义。可以按照以下步骤进行操作：
1. 在 app.json 文件中设置 "navigationStyle" 为 "custom"，表示使用自定义导航栏样式。如果已经存在该配置项，可以直接修改其值为 "custom"。
2. 在页面的 json 配置文件中，添加 "navigationBarTitleText" 字段来设置导航栏标题文字。
3. 在页面的 wxml 文件中，使用自定义导航栏组件来替代原生的导航栏。可以使用 `<view>` 或者 `<custom-navigation-bar>` 来创建自定义的导航栏结构。
4. 在自定义导航栏组件中，可以使用 `<text>` 或者 `<image>` 等标签来设置左侧返回按钮、右侧操作按钮等。通过绑定相应的事件来实现点击事件处理。
需要注意的是，自定义导航栏样式可能与微信小程序原生导航栏样式有所差异，需要自行设计和调整样式。具体实现可以参考微信小程序官方文档中关于自定义导航栏的相关说明。