Vant是有赞前端团队开源的移动端组件库，于2017年开源，已持续维护5年时间。Vant对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。这里是vant小程序版本的地址，点击直接进入即可浏览vant第一步：创建小程序后，打开创建新项目的根目录第二步：通过cmd运行当前项目第三步：初始化当前项目命令：npminit初始化完成状态：这时候在文件夹中会发现多出两个配置文件第四步：下载vant包在当前项目根目录下进行输入命令下载即可npm下载命令：npmi@vant/weapp-S--productioncnpm下载命令：cnpmi@vant/weapp-S--produ
在开发微信小程序时，需要引入一些第三方UI库，这时就需要用到微信小程序的UI，分享一些遇到的问题VantWeapp框架引入组件失败问题:使用Vant组件[“usingcomponents”][“van-button”]:“@vant/weapp/button/index”未找到：当出现:vm192:2miniproject/app.json:["usingcomponents"]["van-button"]:"@vant/weapp/button/index"未找到解决方案:确保已经在miniproject文件里初始化package.json,这样才可以进行后面的操作npminit-y2.在m
在开发微信小程序时，需要引入一些第三方UI库，这时就需要用到微信小程序的UI，分享一些遇到的问题VantWeapp框架引入组件失败问题:使用Vant组件[“usingcomponents”][“van-button”]:“@vant/weapp/button/index”未找到：当出现:vm192:2miniproject/app.json:["usingcomponents"]["van-button"]:"@vant/weapp/button/index"未找到解决方案:确保已经在miniproject文件里初始化package.json,这样才可以进行后面的操作npminit-y2.在m
今天写小程序页面的时候用到了vant-steps，遇到了使用上的两个问题，在这里记录一下问题一，引入vant-steps之后，最后一个节点的显示问题不知道别人的电脑会不会出现这个问题，反正我的是有，不影响，但不爽，在开发者工具中看了半天，就是那个图标跑到上面去了，那我们使用transform：translate把它移下来不就好了于是解决办法就出来了，找到相对应的选择器.van-step--horizontal:last-child.van-step__circle-container.index--van-step__icon{transform:translate(3rpx,31rpx);b
今天写小程序页面的时候用到了vant-steps，遇到了使用上的两个问题，在这里记录一下问题一，引入vant-steps之后，最后一个节点的显示问题不知道别人的电脑会不会出现这个问题，反正我的是有，不影响，但不爽，在开发者工具中看了半天，就是那个图标跑到上面去了，那我们使用transform：translate把它移下来不就好了于是解决办法就出来了，找到相对应的选择器.van-step--horizontal:last-child.van-step__circle-container.index--van-step__icon{transform:translate(3rpx,31rpx);b
count-down组件实现倒计时引入vant组件库count-down组件用法代码实现效果图（添加动画效果）本次实现使用的是微信开发工具。引入vant组件库初始化package.jsonnpminit-y利用npm安装vant组件库npmi@vant/weapp-S--production删除微信样式删除app.json中的”style”:”v2”，以防两种样式冲突。修改project.config.json找到setting属性，修改成"packNpmManually":true,"packNpmRelationList":[ { "packageJsonPath":"./package
count-down组件实现倒计时引入vant组件库count-down组件用法代码实现效果图（添加动画效果）本次实现使用的是微信开发工具。引入vant组件库初始化package.jsonnpminit-y利用npm安装vant组件库npmi@vant/weapp-S--production删除微信样式删除app.json中的”style”:”v2”，以防两种样式冲突。修改project.config.json找到setting属性，修改成"packNpmManually":true,"packNpmRelationList":[ { "packageJsonPath":"./package
目录前言VantWeapp的安装与使用1、安装node.js2、通过npm安装3、修改app.json4、修改project.config.json5、构建npm包6、使用组件全局引入和局部引入全局引入局部引入Toast组件的使用官方文档API详解Props参数Events事件Slot插槽外部样式类前言Vant是一个轻量、可靠的移动端组件库，于2017年开源。目前Vant官方提供了Vue2版本、Vue3版本和微信小程序版本，并由社区团队维护React版本和支付宝小程序版本。微信小程序版本的Vant组件库是VantWeapp，其官方文档是https://youzan.github.io/vant
目录前言VantWeapp的安装与使用1、安装node.js2、通过npm安装3、修改app.json4、修改project.config.json5、构建npm包6、使用组件全局引入和局部引入全局引入局部引入Toast组件的使用官方文档API详解Props参数Events事件Slot插槽外部样式类前言Vant是一个轻量、可靠的移动端组件库，于2017年开源。目前Vant官方提供了Vue2版本、Vue3版本和微信小程序版本，并由社区团队维护React版本和支付宝小程序版本。微信小程序版本的Vant组件库是VantWeapp，其官方文档是https://youzan.github.io/vant
问题重现 最近在做项目时，有一个需求是让van-collapse下拉折叠面板的第一项默认是展开状态；我使用到了VantUI组件，首先按照官网文档的写法直接引入：制定拜访计划保险保障分析制作计划书会客厅讲解修改备注修改备注exportdefault{data(){return{activeNames:['1'],};},};默认每一项都是不展开的： 需求实现先看官方文档CollapseProps：参数说明类型默认值v-model当前展开面板的name手风琴模式：number|string非手风琴模式：(number|string)[]-accordion是否开启手风琴模式boole
