小程序使用 vant 快速创建页面

小程序使用 vant 快速创建页面,第1张

vant UI 组件库是有赞前端团队开发的一个 Vue 组件库,提供了一整套的 UI 基础组件和业陵毕务组件,通过 vant 可以快速搭建出风格统一的页面。

官方地址: vant UI 组件库

将 app.json 中的 "style": "v2" 去除,小程序的 新版基础组件 强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。

工具 ->构建 npm

效果:

内置样式:https://vant-contrib.gitee.io/vant-weapp/#/common

Vant 中默认包含了一些常用样式,可以直接通过 className 的方式使用。

添加1px 边框,为元素添加 Retina 屏幕下的 1px 边框(即 hairline),基于伪类 transform 实现尺源芹。如果不是基于伪类实现的,则我们在添加的 1px 边框在 Retina 下默认是裂蠢 2px 。

拟设计一个设备故腔销亏障状况选择器,需要三级联动,第一级:设备大类;第二级:设备细类;第三级:故障描述,如下图:

1、需要引入vant-picker,需要定制一个数组,包含三级即[一级,一级内容,子类[二级,二级内容,子类[三级,三级内容]]],如下图

2、在vant-picker的onChange事件中,对上面数组进行分级控制。

3、难点,需要把数组按三级拆分出来,放到picker的三列中,控制不好就会各种报错。

1、json,引入vant-picker

2、wxml

绑定change confirm 2个必须事件

3、js文件

3.1 定义选项内容,需要分成三级

3.2 data 中实现picker3列

3.3 onChange 事件实现

3.4 常见问题

3.4.1 最后一级斗激如果没有内容,vant-picker会报错,所以需要做一个空判断,如果为空,赋值一个常量

3.4.2 是使用value,还是选择使用自己定义的常量,需要调试伍神看。value值已经获取到了三列数据,但是容易出错。我最后还是选择使用原来定义常量proSelectList。

4.1 三级数据齐全的选择

4.2 第三级如果为空,第三列使用默认数据


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/8230100.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-14
下一篇 2023-04-14

发表评论

登录后才能评论

评论列表(0条)

保存