其他分享
首页 > 其他分享> > 在Uni-app 微信小程序中怎么使用 Vant 组件库的导航栏组件?

在Uni-app 微信小程序中怎么使用 Vant 组件库的导航栏组件?

作者:互联网

以下是详细的步骤和注意事项。

1. 安装 Vant 组件库

首先,确保你已经安装了 Vant 组件库。你可以通过 npm 或 yarn 来安装:

npm install vant-weapp --save

Bash

或者

yarn add vant-weapp

Bash

2. 引入 Vant 样式和组件

方法一:按需引入

为了减少打包体积,推荐按需引入所需的 Vant 组件和样式。

  1. 在项目根目录下创建 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
  2. 在页面或全局引入所需组件

    在页面的 <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 组件,可以将其全局引入。

  1. 在 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
  2. 直接在页面中使用 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. 注意事项

示例代码

以下是一个完整的示例,展示了如何在 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

标签:
来源: