uni-app如何使用vant-ui的坑

最新推荐文章于 2025-04-27 16:53:49 发布
最新推荐文章于 2025-04-27 16:53:49 发布
阅读量5.5k 收藏 4
点赞数
分类专栏： 小程序 uni-app 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44943268/article/details/107639716
版权
本文探讨了SubmitBar提交订单栏组件与Field输入框组件在实际应用中遇到的问题及解决方案，包括price字段数值调整、iOS端搜索功能输入丢失的延时器解决方法，以及如何在SubmitBar左侧集成取消订单功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.SubmitBar 提交订单栏 组件

在这里插入图片描述
price字段亲测需要*100才是正确的值

2.Field 输入框 组件

在这里插入图片描述
ios端在搜索框输入后 点按钮进行搜索功能 很大概率出现输入框内容丢失
如输入"123456" 点击搜索 获取到可能只有"12345"或"12456"
解决:在这里插入图片描述
设置延时器

3.SubmitBar 提交订单栏 左侧想要放不同的组件

文档中只有这些事例
在这里插入图片描述

根据我的需求需要点击左下角 弹出取消订单功能
在这里插入图片描述
在这里插入图片描述
解决
在这里插入图片描述
配合ActionSheet 上拉菜单组件使用

uni-app项目中引入Vant UI组件库（完美避坑！！！）纯净版
Wzmlzrr的博客
03-19 3万+
uni-app项目中引入Vant UI组件库（纯净版--无uni-ui）
uni-app中uni-ui和vant-weapp冲突
Dylan666d的博客
03-18 1190
1. 需要下载vant的weapp版源码，将dist目录复制到uniapp项目中，路径：项目/wxcomponents/vant 2. 引入后hbuilderx会自动给每个组件生成一个vue文件，但是会包一层uni-shadow-root，如果同时使用uni官方的组件且是通过easycom的custom使用的，则会冲突，需要将正则改为^uni-((?!(shadow-root)).*) 3. 如果报了vant的css错误（Unclosed bracket），则全局搜索https://img.yzcdn.cn
uniapp引入vant UI
weixin_42040328的博客
04-16 2075
直接引用node_modules文件里面的暂时没找到合适方法，有会的大佬可以分享下哈。第一种引用方法, 使用那个引用那个 或 根据需求引用。下载之后根目录会多一个node-modules。第二种使用easycom自动批量移入组件。在pages.json里面引用。/*每个页面公共css */
uni-app开发小程序，使用vant weapp field组件，使用自己封装的表单校验经验分享
最新发布
qq_59499037的博客
04-27 225
由于前期调研不足，之前组件中使用uni-ui的forms表单组件，但是使用的表单控件是vant weapp中的field组件，导致想要添加校验时二者都无法兼容，于是就自己实现一个简易版的表单校验。
uniapp是否可以用vant等移动端UI库、使用步骤以及需要注意的问题
商务合作 / 项目定制开发 / 前端一对一培训、答疑
12-04 8940
解决方法，修改 ~node_modules\vant\lib\index.css 文件，将该文件中的 “url” 改为 “ url” ，一共需修改2处。其他问题，请参考：https://github.com/youzan/vant/issues?原因是微信小程序不支持document，window对象，所以navigator自然是无法使用的。参考文章：https://github.com/youzan/vant/issues/12421。1、安装Vant Version 2.13.2后，导入样式，报错。
uniapp使用Vant ui
weixin_42878337的博客
04-11 7773
网上百度uniapp使用vant时，很多答案都是在根路径下创建文件夹，而且都是基于小程序环境的。创建完成后，加载vant依赖，这里我使用的是vue2，所以加载的事vant2。可以看到vant组件中的按钮已经显示出来了，样式也是可以的。到这里就结束了，可以随意在里面使用你想要的组件啦。vant组件的样式还是可以的，但是针对于uniapp，个人觉得还是使用针对于uniapp开发的框架会好用一些。但是在uniapp中这样是不可以的，本人亲测，勿掉坑了。到这里已经引入成功了，在vue框架中可以直接在这里引入样式。
uniapp使用vant ui方式
u013141712的专栏
06-15 945
参考链接： https://www.jianshu.com/p/5dcada1d8f8d 里面github参考：
uni-app使用Vant组件
hahahhahahahha123456的博客
11-19 8344
前言 vant ui有h5版和微信小程序版。其h5版只能用于h5，其微信小程序版（vant weapp）可用于微信和App，从uni-app 2.4.7起，H5和QQ小程序也支持了微信小程序组件。 使用步骤 下载代码 在项目根目录下新建wxcomponents目录 ，此目录应该与components目录同级。 直接通过git下载vant-weapp最新源代码，并将dist目录拷贝到新建的wxcomponents目录下，并重命名dist为vant-weapp。 在...
uni-app 引入vant-weapp、lin-ui组件库
IceStreamLab
01-24 2133
小程序组件支持 在项目中创建wxcomponents目录 引入Vant-Weapp 小程序ui组件库 vant-weapp github地址 直接通过 git 下载 Vant Weapp 源代码，并将dist目录拷贝到自己的项目中 引入Lin-UI 小程序ui组件库 git clone https://github.com/TaleLin/lin-ui.git 直接通过git下载 Lin UI...
uni-app整合vant、nuxt
hahahhahahahha123456的博客
04-30 3254
创建uni-app移动端项目使用uni-cli下载 vue create -p dcloudio/uni-preset-vue my-project 下载Nuxt框架 ,无需使用create-nuxt-app. 脚手架 yarn add nuxt 配置package.json文件 { "name": "my-app", "scripts": { "dev": "nuxt", "build": "nuxt build", "generate": ...
uniapp引入vant ui
qq_21115567的博客
09-01 760
4.使用:在pages.json中引入组件，为了方便我直接在全局的globalStyle中引入所有的组件，也可以在单个文件中引入该页面需要使用的组件。2.前往Github下载压缩文件，解压后将该项目的dist文件夹替换步骤1的dist文件夹。1.在项目中创建一个文件叫wxcomponents，注意这个文件和page文件平级。搞了好久也没看出来这是因为啥报的错,把这行注掉后,看下面。3.App.vue的style中引入样式。
uniapp引入vantUI库
零度空间
12-16 2807
image.png uniapp引入vantUI库 下载vant组件 vant的GitHub下载地址下载完成后解压，然后在项目更目录下创建文件夹wxcomponents，注意这里的wxcomponents目录级别和pages在同一级别，然后再该目录下创建vant目录。回到刚才解压的vant目录，找到dist文件夹，把它复制到vant目录下 image.png 引用vant组件 ...
在uniapp中使用VantUI组件库(微信版)
weixin_48888726的博客
11-08 2415
【代码】在uniapp中使用VantUI组件库(微信版)
[保姆级教程]在uniapp中使用vant框架
热门推荐
肥晨开发的学习之路
06-21 1万+
和Vue.js的版本都在不断更新，因此上述步骤可能会随着版本的更新而有所变化。但是，如果你想要全局引入某个组件（这通常不推荐，因为它会增加你的包大小），你可以在。可能已经内置了类似的工具，或者你可能需要根据你的构建工具进行特定的配置。来按需加载组件，那么你可以不用全局引入样式，而是在每个组件中单独引入。然后，在你的模板部分，你可以像使用普通的Vue组件一样使用。的组件时，Babel会自动为你处理样式和组件的按需引入。根据参考文章和Vant的官方文档，在你的Vue 2.x项目的根目录下，使用npm来安装。
uni-app调用vant组件或uview组件
weixin_55518113的博客
06-11 709
3.把node-modules中下载vant里面的dist文件夹拿出来放在wxcomponents里。2..把node-modules中下载uview-ui拿出来，放在跟pages同级的位置上。4.在pages.json中找到globalStyle，跟它平级加入easycom。6.在pages.json中找到globalStyle，跟它平级加入easycom。4.在uni.scss上引用。最后就可以直接使用组件了~~3.在main.js中引入。5.在App.vue上引用。
uniapp如何使用Vant UI库
2301_79534935的博客
01-17 1020
最后在文件中使用Vant库中的组件直接复制进去即可。接着需要将它进行解压，然后复制以下文件夹。库必须要先下载它所对应的插件。然后如下图所示：打开文件找到。的代码编写的，所以要想使用。以我为例：我是使用的是。的同级目录下进行粘贴，
【前端 Uniapp】使用Vant打造Uniapp项目（避坑版）
m0_74824877的博客
12-11 5942
Uniapp 是基于 Vue.js 的开发框架，通过一套代码可以同时发布到多个平台的应用框架。而 Vant 是针对移动端 Vue.js 的组件库。通过这样的组合，我们可以快速构建出一个跨平台的移动应用。Vant 已经支持多种小程序和 H5 平台，也对 Uniapp 实现了完美的支持。我们可以使用 Vant 提供的丰富的组件和功能，来快速开发一个漂亮、易用的移动应用。
uniapp安装vant并解决样式引入报错
qq_44741577的博客
03-16 2297
unaipp引入vant组件库的时候，按照官网的步骤，一直报错。
uniapp 开发踩坑记录
weixin_30307267的博客
03-29 310
使用dcloud 的 uniapp开发了一个app，把遇到的问题总结一下： 1.uniapp 前端的布局代码与小程序 高度相似（如果没有接触过 建议多看看文档）；js是用的vue 布局比较简单，比jquery好用多了，这里并不是说jquery不优秀； 2.视频问题：video有个poster属性，在h5端与小程序端没有问题，在app中不现实封面图，无论怎么设置都不行，官方也没有给出响应的解决方...
uni-app 用vant sidbar
02-13
### 集成Vant UI库到Uni-app项目 为了在uni-app项目中集成并使用Vant的sidebar组件，需遵循特定步骤来确保兼容性和功能性。 #### 安装依赖包 首先，在命令行工具中进入项目的根目录执行npm安装命令以引入Vant库： ```bash npm install @vant/weapp -S --production ``` 此操作会下载必要的文件至`node_modules`文件夹内[^1]。 #### 引入组件 接着修改`pages.json`配置文件，注册所需使用的Vant组件。对于sidebar及其关联项而言，则添加如下代码片段于适当位置： ```json { "usingComponents": { "van-sidebar": "@vant/weapp/sidebar/index", "van-sidebar-item": "@vant/weapp/sidebar-item/index" } } ``` 上述设置使得可以在页面模板里通过自定义标签形式调用这些UI部件[^2]。 #### 编写页面结构与样式 创建一个新的`.vue`文件作为承载sidebar逻辑和平铺内容展示区域的基础单元。在此处利用之前声明过的组件标签构建布局框架，并绑定相应的数据模型属性给它们控制显示状态变化。 ```html <template> <view class="container"> <!-- 左侧导航栏 --> <van-sidebar v-model="activeKey" @change="onChange"> <van-sidebar-item title="选项一"/> <van-sidebar-item title="选项二"/> <van-sidebar-item title="选项三"/> </van-sidebar> <!-- 右侧主要内容区 --> <view :class="{hideSidebar:!opened,openSidebar:opened}"> 主要内容... </view> </view> </template> <script> export default { data(){ return { activeKey:0, opened:true }; }, methods:{ onChange(event){ console.log('切换到了第', event.detail,'页'); // 更新打开关闭标志位 this.opened=!this.opened; } } }; </script> <style scoped lang="scss"> .container{ display:flex; .hideSidebar{ /* 当隐藏时 */ transform:translateX(-75%); } .openSidebar{/* 显示状态下 */ transition:.3s ease-out; } } </style> ``` 这段示例展示了如何组合运用Vue语法特性以及CSS类名动态切换机制达成交互效果，同时保持良好的用户体验[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值