uni-app vant组件库使用心得

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app vant组件库使用心得

强调下这个组件是app和微信小程序通用，但不能用于h5、其他小程序

官方更新很久支持 小程序的组件了。文档介绍地址： http://uniapp.dcloud.io/

vant 官方文档： https://youzan.github.io/vant-weapp

怎么使用昵？ 安装方式支持npm git 。还有一个方式是直接去 git clone 传送门：https://github.com/youzan/vant-weapp

下载后 把压缩文件解压，看到根目录有一个 dist 的目录，将整个目录拷贝下来。

然后在你的UNI 的项目根目录创建文件： wxcomponents/vant ，将你上面拷贝的 dist 目录的内容粘贴到 项目根目录 wxcomponents/vant 下。

然后打开你项目根目录的 pages.json 在每个页面的 style 下 创建一个 usingComponent （这块就请看UNI的官方文档吧！）

例如：

"usingComponents" : {  
   "van-search": "/wxcomponents/vant/dist/search/index"  
}

创建后 打开page.vue 页面。 使用组件 （每个组件使用的方式都不一样 这点可以去vant官网查看！）

<van-search :value="value" placeholder="请输入搜索关键词" show-action [@search](/user/search)="onSearch"  @cancel="onCancel">
</van-search>

值得一说的是 vant 提供的方式代码是 ：

<van-search  
  value="{{ value }}"  
  placeholder="请输入搜索关键词"  
  show-action  
  bind:search="onSearch"  
  bind:cancel="onCancel"  
/>

在UNI 下需要做一些修改：

  1. 绑定的变量使用 :value=“value”

  2. bind:search 更改为 @search=“onSearch” ； 就是把 bind： 换成 @ 即可。

更改后的例子：

<van-search :value="value" placeholder="请输入搜索关键词" show-action [@search](/user/search)="onSearch"  @cancel="onCancel">
</van-search>

特别要说明的是：每次修改 page.vue 中的节点以后 保存后不会直接生效，你得点重新运行（控制台右上角有一个类似刷新的图标）

vant weapp用于app时，在低端Android上有css兼容性问题要注意。因为app的webview和微信不一样，app是系统webview。Android5以下的webview版本较低，有些较新的css不支持。


Harmonyos Next教程
1 回复

在uni-app中集成并使用vant组件库，可以极大地提升开发效率和应用的用户体验。vant组件库是一套轻量、可靠的移动端Vue组件库，适用于uni-app这类跨平台框架。下面我将通过一些代码案例来分享vant组件库在uni-app中的使用心得。

1. 安装vant组件库

首先，需要在uni-app项目中安装vant组件库。可以通过npm或yarn进行安装：

npm install vant --save
# 或者
yarn add vant

2. 引入vant组件

在main.js中全局引入vant组件库：

import Vue from 'vue'
import App from './App'
import Vant from 'vant'
import 'vant/lib/index.css'

Vue.use(Vant)

new Vue({
    render: h => h(App),
}).$mount('#app')

3. 使用vant组件

示例：使用Button组件

在页面的.vue文件中直接使用vant的Button组件：

<template>
  <view>
    <van-button type="primary">主要按钮</van-button>
  </view>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

<style>
/* 可以在这里添加自定义样式 */
</style>

示例：使用List组件

List组件常用于展示列表数据：

<template>
  <view>
    <van-list
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in items" :key="item" :title="item" />
    </van-list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      finished: false,
      page: 1
    }
  },
  methods: {
    onLoad() {
      if (this.finished) return;
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.items.push(`Item ${this.items.length + 1}`);
        }
        this.page++;
        if (this.items.length >= 50) {
          this.finished = true;
        }
      }, 1000);
    }
  },
  mounted() {
    this.onLoad();
  }
}
</script>

总结

vant组件库为uni-app提供了丰富的UI组件，使得开发者可以快速构建出美观且功能完善的移动应用。通过全局引入组件库并在页面中使用具体组件的方式，我们可以高效地完成开发工作。上述示例展示了如何安装、引入以及使用vant的Button和List组件，实际上vant提供了更多组件，如Dialog、Toast、Picker等，开发者可以根据项目需求灵活选用。

回到顶部