uni-app自定义导航栏和下拉刷新

通过 uni-app 开发微信小程序端，要实现一个可以自定义导航栏并且支持下拉刷新的效果。这里做一个总结，方便以后查询。

我没有使用官方推荐的开发方式， HBuildeerX可视化界面。可能因为用 webstorm 习惯了。所以采用 vue-cli 命令行来创建基本模板。

如何使用 vue-cli 命令行生成项目，请查阅官方文档。

在项目中使用 scss

习惯用 scss 写 css代码，所以我们首先安装 sass、node-sass、sass-loader 这三个包。

在项目根目录下执行:

cnpm i node-sass sass sass-loader -D

安装之后, 我们进行编译小程序平台的包。一些编译脚本都在 package.json 文件中。

运行 npm run dev:mp-weixin 命令后，你会发现报错了。报错的原因是 node-sass 版本太高了。这个坑我踩了两次，所以特地在这里重现一次。

解决方法就是降级 node-sass 版本。所以我们要安装 7.x的版本才可以在 uni-app 中运行。

执行:

cnpm install sass-loader@7.0.2 -D

为什么需要 7.x的版本而不是8.x的版本，我怀疑是项目中 自带的uni.scss 作为全局变量它们内部使用的是 7.x的配置方式。

现在我们node-sass报错问题解决好了，就开始真正的编译小程序平台的代码吧。

开发模式下调试小程序

npm run dev:mp-weixin

启动之后，我们会在 dist/dev目录下看到对应编译的平台代码。这时候打开微信开发者工具，将 mp-weixin在开发者工具中运行。而且 uni-app 自带热更新功能，如果只要修改代码，就会进行重新编译，编译之后对应的小程序也会进行更新。

自定义导航栏

我们需要在首页自定义导航栏，这时候配置项目下的 pages.json 文件。

添加

{
	"navigationStyle": "custom"
}

这个的作用就是取消默认的原生导航栏。具体注意事项请查阅官网。

默认的原生导航栏已经被我们抹去了，所以我们需要自己写一个来补上去。修改 pages/index/index.vue 文件。

template 内容:

<view>
	<view class="custom-bar">
		大标题
	</view>
</view>

style 样式

$custom-bar-height: 80rpx;

	.custom-bar {
		height: calc(var(--status-bar-height) + #{$custom-bar-height});
		width: 100%;
		position: fixed;
		z-index: 10;
		background-color: #ccc;
		box-sizing: border-box;
		padding-top: 64rpx;
		padding-left: 20rpx;
		color: #fff;
		font-weight: 700;
	}

这时候小程序首页顶部就变成了这个样子

当然我们可以根据自己的需求来进行美化。

下拉刷新

下拉刷新使用 mescroll 库，可以在 uni-app 插件市场找到，并且通过 HBuildX 编辑器快捷导入。

导入成功之后，会在 src/components 下多出 mescroll-uni 目录。

然后我们首先全局注册, 在 main.js 中

import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue"

Vue.component('mescroll-body', MescrollBody)

这个时候继续完善首页，完整代码如下。

<template>
	<view>
		<view class="custom-bar">
			大标题
		</view>
		<view class="wrapper">
			<mescroll-body top="0" ref="mescrollRef" @init="mescrollInit" @down="downCallback" :down="downOption">
				<view>
					<view v-for="item in 1000">
						{{ item }}
					</view>
				</view>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				// 下拉刷新配置
				downOption: {
					use: true,
					auto: false,
					native: false
				}
			}
		},
		onLoad() {

		},
		methods: {
			// 下拉刷新回调函数
			downCallback() {
				console.log('下拉刷新');
				setTimeout(() => {
					this.mescroll.endSuccess();
				}, 2000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	$custom-bar-height: 80rpx;

	.custom-bar {
		height: calc(var(--status-bar-height) + #{$custom-bar-height});
		width: 100%;
		position: fixed;
		z-index: 10;
		background-color: #ccc;
		box-sizing: border-box;
		padding-top: 64rpx;
		padding-left: 20rpx;
		color: #fff;
		font-weight: 700;
	}
	.wrapper {
		padding-top: calc(var(--status-bar-height) + #{$custom-bar-height});
	}
</style>