我们这里做的是移动端的项目,基于提供的参考视频,截图了app的图片,作为实现原型时候的背景图。
原来实现的移动端的项目是基于vant开发的,因而下载了vant的元件库。参考地址:
Vant 4 - A lightweight, customizable Vue UI library for mobile web apps.
需求中需要用到 图标,参考:
Axure学与练:使用图标 - 知乎
我是访问了iconfont的网址在vant的图标库里面复制图标到axure
另外需要注意到的一点就是,使用vant的搜索框原件的话,对于清空按钮鼠标单击是无法触发清空文本框的,应该使用鼠标按下事件触发清空文本框
另外注意复制动态面板时如果当前是在页面里面选中动态面板的话是复制不到理想的state下面的,需要进入到动态面板下面的state中选中指定的动态面板来复制
在实践中使用了vant的列表原件来实现企业列表下的状态。
使用了vant下表单中的选择器来实现带关联关系的选择器的展示。
使用的方法是另外开始一个anxre软件打开vant原型库 Vant元件库.rp文件,再指定的页面找到需要用到的部分复制,因为这样取用的已经添加上了一些事件和流程可以较好的提升我们实现页面的速度。
实现效果: