草庐IT

van-collapse

全部标签

微信小程序使用van组件Tabbar 标签栏

微信小程序使用van组件Tabbar标签栏引入vant组件库使用TabBar组件引入vant组件库(1)打开我们小程序的项目目录,然后打开文件所在的位置。(2)cmd窗口初始化(3)通过npm安装vant/weappnpmi@vant/weapp-S--production(4)安装miniprogramnpmiminiprogram-sm-crypto--production(5)修改app.jsonapp.json中的“style”:“v2”去除(6)修改project.config.json开发者工具创建的项目,miniprogramRoot默认为miniprogram,package.

vue2+vant-ui van-field输入框显示隐藏密码组件封装(移动端项目、H5项目)

一、需求不管是什么项目,通常会有这种需求,密码输入的时候点击要显示密码再次点击隐藏二、最终效果三、参数配置继承van-field所有API(Attributes(Props)、Events、Slots)新增了属性:showPassword默认不显示四、具体代码template>van-fieldclass="t_vant_field"v-bind="$attrs":type="passwordType"v-on="$listeners">templateslot="right-icon"v-if="showPassword">spanclass="solts"@click="switchPas

vant组件van-swipe-cell中的滑动删除功能(数据的删除功能)

我们通过查看vant4官网发现上面并没有写如何删除,只有删除的按钮我写的是这样的:wxml:我这里数据是存在batchStore.informList中{index}}">删除重要的是:要绑定一个id,是要删除的那条数据的唯一标识js:我这里数据是存在batchStore.informList中先获取要删除那条数据的idfunctiononClose(e){//删除数据console.log("进入删除数据模块")console.log(e.currentTarget.id,"被点到的数据");//被点击数据leti=e.currentTarget.idconst{position,insta

微信小程序(van-tabs) 去除横向滚动条样式(附加源码解决方案+报错图)

问题描述今天第一次接触vant组件库。ant官网地址适用于Vue3支持Vue2、Vue3、微信小程序等我在使用van-tabs组件时遇到了一个问题,如下图所示:从图片上可以看到有个灰色的横向滚动条,一开始领导给我说这个问题,我反反复复都没有测出来,在微信开发者工具、IOS系统都没有这个问题,但是小程序发布后,在安卓手机上复现了这个问题。一开始我是昏头雾水,经过百度搜索,找到了解决方案,下面分享给大家:解决方案你在哪个页面上使用的van-tabs组件,就在那个页面的标签里加上下面这段css样式,保存重新编译一下,看下能否解决你所遇到的问题。/**去除滚动条样式*//deep/::-webkit-

vant 组件van-tabbar实现底部导航

vant组件van-tabbar实现底部导航简单使用van-tabbar实现底部导航1、创建底部导航组件2、子页面引用优化van-tabbar使用1、创建主页面2、创建子模块3、配置路由(很重要)4、总结简单使用van-tabbar实现底部导航移动端小白,首次尝试移动H5开发,使用vant2的van-tabbar实现底部导航功能。本文忽略vant使用步骤,项目中使用全局引用。由于查询很多文章有的过于复杂,有的功能未实现,所以简单整理如有问题欢迎留言改正。1、创建底部导航组件底部导航栏简单实现,需要注意的是,组件是需要在所有需要使用的页面进行引用。所以将底部导航栏组合起来封装成一个组件。//Ta

vantUI van-picker中的column使用,picker选择器展示对象数组里面的属性,自定义展示数据

项目场景:需要VantUI实现的功能问题描述vant中的picker选择器,只能用这种数组,来展示数据columns:[‘杭州’,‘宁波’,‘温州’,‘绍兴’,‘湖州’,‘嘉兴’,‘金华’,‘衢州’],往往我们的请求数据,都是这样的。对象数组,需要id,也需要文字显示。原因分析:要实现的功能我的选中项能展示名称,并且选中了还可以知道它的id。解决方案:步骤1、直接给选择器数组赋值为【对象数组】van-pickertitle="请选择请假类型"show-toolbar:columns="leaveTypeList":key=""@confirm="onConfirmType"@cancel="o

微信小程序封装自定义van-dropdown-item 下拉选择框

1.vantweapp虽然给我们提供了van-dropdown-item且美观的组件但是没有插槽无法自定义内容,限制了各位大神的操作,接下来我们先来了解他的使用在去封装自己的自定义//json"usingComponents":{"van-dropdown-menu":"@vant/weapp/dropdown-menu/index","van-dropdown-item":"@vant/weapp/dropdown-item/index"}//htmlvan-dropdown-menu>van-dropdown-itemvalue="{{value1}}"options="{{option1

完美解决微信小程序使用复选框van-checkbox无法选中

由于小程序使用了vant-ui框架,导致checkbox点击无法选中问题 {checked}}"shape="square">我已阅读并同意>《用户协议》《隐私政策》记得定义checked默认值 解决办法:添加onChange事件,给checked做赋值操作。{checked}}"shape="square"bind:change="onChange">我已阅读并同意《用户协议》《隐私政策》onChange(e){this.setData({checked:e.detail})},可以打印看看console.log(e)选中效果:取消选中效果:  

微信小程序 webview 中的h5 页面 van-uploader 部分机型无法上传 解决方案

 20220704更jssdkchooseImage安卓手机无法唤起相机或相册?微信版本8.0.24|微信开放社区调用chooseImage无法唤起相机或相册。经过多方测试,发现只有安卓微信8.0.24是这样。 微信官网解决方案:请使用wx.chooseMedia(Objectobject)  wx.chooseMedia(Objectobject)|微信开放文档8.0.23版本更新后小程序webview组件内嵌h5的时候上传文件调用出问题?|微信开放社区1.小程序webview组件使用vantui上传方法是多文件上传图片时出现直接跳转到图片选择界面,没有跳转到文件选择界面2.因为直接跳转图片

Vue3使用van-uploader遇到某些安卓机型(小米、vivo、oppo等等)无法上传文件解决方案

文章目录概要对应的附件格式组件封装小结概要最近在做移动端时遇到个上传附件的需求是只能上传以下类型的文件:图片文件(jpeg、jpg、png)文档文件(pdf、txt、doc、docx、xls、xlsx、ppt、pptx)在这里我用的是有赞的上传组件,但是上线后,发现苹果手机没有问题,反而一些安卓手机都出现了问题,在经过几次的修改,调整了限制文件类型后,就正常上传了!!!可喜可贺,以此记录下解决方法,希望能够帮到大家。对应的附件格式图片格式(限制png、jpeg、png)accept=“image/jpeg,image/png,image/jpg”jpeg:image/jpegpng:image