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

在使用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-viewscroll-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) returnthis.onRefreshing = trueif (!this.triggered)this.triggered = truesetTimeout(() => {this.triggered = falsethis.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()