2023
Yonbuilder是一个被广泛使用的移动开发工具,其中的AVM框架作为核心构成之一,有十分出色的性能。其自身封装了一套UI组件,以满足开发者在不同平台上构建应用程序的需求。如图所示:然而这些组件只封
上一章介绍了什么是ACT以及如何引入组件库,本章来介绍一下在页面中使用UI组件的具体代码实现。将act文件夹引入后,便可在实际页面中进行应用。首先,在你的代码中,按需引入所需的Vant组件,例如按钮、
VantUI中的van-list,即瀑布流滚动加载,用于展示长列表,当列表即将滚动到底部时,会触发事件并加载更多列表项。官网给出的示例如图所示:首先设置listLoading和finished两个变量,listLoading控制列表数据的加载状态,finished为是否已加载完成,加载完成后不再触发load事件。@load="onLoadList"绑定了一个加载事件,当滚动条与底部距离小于 off...
上一章我们已经全部完成了层级选择器的实现。除此之外我们还想增加一个关键词搜索功能。在此之前我们需要先完成二级选择器的显示与隐藏。通过v-show来控制二级选择器的显示与隐藏。当点击按钮时,在方法里改变item.isShow的值即可。若后台数据中没有提供isShow这样的字段,则需要在请求接口的时候本地初始化。接下来需要实现关键词搜索功能。利用filter函数,当包含关键词的时候就返回这条数据。如图...
上一篇我们已经利用van-checkbox成功实现二级选择器控制一级的选中状态,点击此链接>>查看。最后需要实现通过最外层全选按钮全选所有选择器的功能。给全选按钮添加click或change事件(都可)。我们需要通过判断全选按钮的选中状态来控制层叠选择器是否全选,在checkAllLeader函数中执行以下代码:当全选时,将一级选择器选中状态设置为true,并执行上篇提到的checkAllMemb...
上一篇我们已经利用van-checkbox成功实现一级选择器控制二级全选的功能,点击此链接>>查看。接下来需要实现当取消任意一个二级选择器的选中状态(即取消全选状态时),一级选择器也同步取消。首先给二级选择器添加click事件,同样,不要给复选框组添加change事件,避免一级选择器选中状态变化时change事件会一直触发。复选框组通过 v-model 数组绑定复选框的勾选状态,通过name控制数...
翻了一下vantUI官网,发现没有可以直接使用的树形控件或层级选择器的组件,所以尝试用checkbox实现。我们想实现的是如图所示的功能,当选中一级选择器后,其所属的二级选择器能够被全选;当取消二级选择器的全选状态时,一级选择器也同时取消选中状态;最外层还有一个全选按钮控制所有选择器的全选。DOM结构如图所示:首先实现一级选择器控制二级全选的功能。van-checkbox有提供toggleAll方...
上一篇我们已经实现了只有一组复选框组的时候通过一级选择器控制二级全选,但是很多情况下都不止一组复选框组,比如需要循环渲染后台数据时,由于外层标签有vfor循环,会导致出现很多个ref注册的组件,此时的toggleAll方法便会失效或者报错。抛弃自带的全选方法,我们这里使用map函数处理数据。首先给一级选择器添加click事件。注意要使用click事件而不是change事件,否则后面实现取消全选功能...
VantUI官网中给的示例是一个包含字符串的纯数组,如图所示:但是大多时候,我们需要绑定的都是一个对象数组,如果直接使用的话,渲染的效果会显示为[Object]。这时可以利用van-picker自带的 value-key 属性,value-key属性指选项对象中,选项文字对应的键名。以下面的数据为例:我们希望选择器展示的是对象中的username属性,则在van-picker中添加如下代码:这时可...
vue项目中pc端项目有element ui、Ant Design Vue、View UI等等,而vant则是移动端中的中流砥柱,vant是一款轻量级的移动端组件,其组件的平均体积小于1kb,跟其他组件一样,封装了丰富的ui插件,可以帮助前端快速构建页面。首先看一下自己项目的的vue版本npm list vue根据2和3分别有两种安装方式。vue3:直接安装最新版npm i vant -Svue2...