在Uni-app 微信小程序中怎么使用 Vant 组件库的导航栏组件?
作者:互联网
以下是详细的步骤和注意事项。
1. 安装 Vant 组件库
首先,确保你已经安装了 Vant 组件库。你可以通过 npm 或 yarn 来安装:
npm install vant-weapp --save
Bash
或者
yarn add vant-weapp
Bash
2. 引入 Vant 样式和组件
方法一:按需引入
为了减少打包体积,推荐按需引入所需的 Vant 组件和样式。
-
在项目根目录下创建
vite.config.js
或vue.config.js
文件(如果还没有),并配置按需引入:// vite.config.js 或 vue.config.js const path = require('path'); const { defineConfig } = require('@dcloudio/uni-cli-shared'); module.exports = defineConfig({ alias: { '@': path.resolve(__dirname, 'src') }, css: { loaderOptions: { less: { additionalData: `@import "@/static/css/vant-theme.less";` } } } });
JavaScript -
在页面或全局引入所需组件:
在页面的
<script>
标签中引入van-nav-bar
组件,并注册它:<template> <van-nav-bar title="标题" left-text="返回" right-text="按钮" left-arrow @click-left="goBack" /> </template> <script> import { NavBar } from 'vant-weapp'; export default { components: { [NavBar.name]: NavBar }, methods: { goBack() { uni.navigateBack(); } } }; </script>
Vue
方法二:全局引入
如果你希望在整个项目中使用 Vant 组件,可以将其全局引入。
-
在
main.js
中全局引入 Vant 样式和组件:// main.js import Vue from 'vue'; import App from './App'; import Vant from 'vant-weapp'; import 'vant-weapp/dist/style.css'; Vue.use(Vant); Vue.config.productionTip = false; App.mpType = 'app'; const app = new Vue({ ...App }); app.$mount();
JavaScript -
直接在页面中使用 Vant 组件:
<template> <van-nav-bar title="标题" left-text="返回" right-text="按钮" left-arrow @click-left="goBack" /> </template> <script> export default { methods: { goBack() { uni.navigateBack(); } } }; </script>
Vue
3. 使用 Vant 导航栏组件
基本用法
<template>
<van-nav-bar
title="标题"
left-text="返回"
right-text="按钮"
left-arrow
@click-left="goBack"
@click-right="onClickRight"
/>
</template>
<script>
export default {
methods: {
goBack() {
uni.navigateBack();
},
onClickRight() {
uni.showToast({
title: '点击了右侧按钮',
icon: 'none'
});
}
}
};
</script>
Vue
自定义内容
你可以通过插槽(slot)来自定义导航栏的内容。例如,在左侧、右侧或标题区域插入自定义元素:
<template>
<van-nav-bar title="标题" left-arrow @click-left="goBack">
<template #left>
<img src="@/static/images/logo.png" alt="Logo" class="nav-logo" />
</template>
<template #right>
<van-icon name="search" size="18" />
</template>
</van-nav-bar>
</template>
<script>
export default {
methods: {
goBack() {
uni.navigateBack();
}
}
};
</script>
<style scoped>
.nav-logo {
width: 30px;
height: 30px;
vertical-align: middle;
}
</style>
Vue
4. 配置 pages.json
确保在 pages.json
中为需要使用自定义导航栏的页面设置 navigationStyle
为 custom
:
{
"globalStyle": {
"navigationStyle": "custom"
},
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationStyle": "custom"
}
}
]
}
JSON
5. 注意事项
- 图片资源路径:确保本地图片资源路径正确,并使用
require
或import
引入图片。 - 样式覆盖:如果需要覆盖 Vant 默认样式,可以通过添加自定义样式类来实现。
- 事件处理:使用
@click-left
和@click-right
等事件处理函数来响应用户交互。
示例代码
以下是一个完整的示例,展示了如何在 Uni-app 微信小程序中使用 Vant 的导航栏组件,并自定义其内容:
<template>
<view>
<van-nav-bar
title="首页"
left-text="返回"
right-text="更多"
left-arrow
@click-left="goBack"
@click-right="onClickRight"
>
<template #left>
<img src="@/static/images/logo.png" alt="Logo" class="nav-logo" />
</template>
<template #right>
<van-icon name="search" size="18" />
</template>
</van-nav-bar>
<view class="page-content">
<!-- 页面内容 -->
</view>
</view>
</template>
<script>
export default {
methods: {
goBack() {
uni.navigateBack();
},
onClickRight() {
uni.showToast({
title: '点击了右侧按钮',
icon: 'none'
});
}
}
};
</script>
<style scoped>
.nav-logo {
width: 30px;
height: 30px;
vertical-align: middle;
}
.page-content {
padding-top: 44px; /* 确保内容不被导航栏遮挡 */
}
</style>
Vue
标签: 来源: