微信小程序自定义导航栏与自带下拉刷新冲突

       在使用HbuilderX开发微信小程序时（在HbuilderX中写代码，在微信开发者工具编译），由于微信小程序自带的导航栏功能少，样式单一等，于是采用colorUI自定义导航栏实现需求。而问题就一而再再而三的出现了：

• 自定义导航栏导致系统自带的下拉刷新不能用（官方回应这是微信小程序的bug）
• 采用HbuilderX自带的scroll-view组件的下拉刷新
• 但scroll-view在微信小程序却出现了：
  1. 无限刷新问题
  2. scroll-view下拉刷新区域滚动问题

现在我来一一记录我是怎么处理这些问题的。

1、在pages.json文件中自定义导航栏并将系统自带的下拉刷新关闭

		{
			"path": "pages/home/home",
			"style" :
			{
			    "enablePullDownRefresh": false,
				"navigationStyle": "custom"
			}
		}

2、采用scroll-view的下拉刷新

用法：在整个template页面下（或者想触发下拉刷新的组件外）套一个scroll-view标签，并将refresher-enabled属性设置为true，意为开启自定义下拉刷新，具体文档链接如下：
scroll-view组件官方文档

3、解决小程序无限刷新的问题

这里我先跟大家解释一下为什么会出现这个问题，scroll-view的下拉刷新的开启与关闭是与他自带的一个属性refresher-triggered有关，如果值为true则开启下拉刷新，false则关闭

之所以会无限刷新是因为直接将refresher-triggered赋值为false不生效。具体解决办法如下：

<template>
	<scroll-view
		scroll-y 
		:style="{height: verticalNavHeight + 'px'}" 
		refresher-enabled="true"
		:refresher-triggered="triggered" 
		:refresher-threshold="100" 
		@refresherrefresh="onRefresh()"
		@refresherrestore="onRestore()">
	......
	</scroll-view>
</template>

<script>
export default {
	data(){
		return{
			// 下拉刷新
			triggered: false,
			onRefreshing: false,
			refreshTime: 1000
		}	
	},
	methods: {
		onRefresh() {
			if (this.onRefreshing) return
			this.onRefreshing = true
			if (!this.triggered)
				this.triggered = true
			setTimeout(() => {
				this.triggered = false
				this.onRefreshing = false
				// 刷新数据
				this.getData()
				setTimeout(() => {
					uni.showToast({
							title: 'success'
					})
				}, 100)
			}, this.refreshTime)
		},
		onRestore() {
		// 这一步是关键，官方文档this.triggered = 'restore'无效（亲测）
			this.triggered = false
		}		
	}
}
</script>

4、解决scroll-view下拉刷新区域滚动问题

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

什么是区域滚动？

这里给大家解释一下，滚动分为页面滚动跟区域滚动，而区域是多高呢？则需要通过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()