筑坐极_一天完成移动端Cell布局及登录功能展示

开发项目：web前端

开发环境：WebStorm

开发者：汐ゆゆ

项目详情：

1.界面展示

一天完成移动端Cell布局及登录功能展示

这次创作的是一个基于Cell布局的移动端菜单界面

应用了vant的ui框架非常简单方便

做出来的效果也很直观简洁美观

并且还添加了登录的功能模块

一天完成移动端Cell布局及登录功能展示

2.功能介绍

这次模拟的一个移动端菜单界面实例

包含了许多常用组件

Button 按钮

Cell 单元格

Icon 图标

Toast 轻提示

Switch 开关

NavBar 导航栏

等等根据功能需求来进行不同的添加使用

一天完成移动端Cell布局及登录功能展示

可以实现开关的切换对应路由二级菜单的跳转

一天完成移动端Cell布局及登录功能展示

登录界面的输入框还加入了内容检测防止用户输入空内容以及不合法的内容

一天完成移动端Cell布局及登录功能展示

对应失败会有轻提示内容弹出提醒用户

一天完成移动端Cell布局及登录功能展示

最后就是都输入正确的成功提示了

一天完成移动端Cell布局及登录功能展示

3.模块功能介绍

在初次使用时我们要安装vant组件命令如下

一天完成移动端Cell布局及登录功能展示

安装成功后会有版本提示

一天完成移动端Cell布局及登录功能展示

然后需要配置环境和引入组件

在.babelrc文件对应位置添加

一天完成移动端Cell布局及登录功能展示

再在main.js文件中添加需要使用到的组件

一天完成移动端Cell布局及登录功能展示

这里推荐用什么添加什么需要时在添加

至此 vant的环境就搭配好了我们就可以开始自由发挥了

一天完成移动端Cell布局及登录功能展示

这里使用了开发文档提供的模板然后自己加以修改实现布局

一天完成移动端Cell布局及登录功能展示

登录界面也是同理

一天完成移动端Cell布局及登录功能展示

这里还添加了真实的测试接口与产品实际功能相符合

下面是js部分的代码

一天完成移动端Cell布局及登录功能展示

默认给data中的用户名和密码赋空值

用v-model与输入框进行实时双向绑定

当用户点击确定按钮时会执行onSubmit函数

会判断输入框的内容如果内容错误就会有相应提示

如果都正确就会执行axios的post方法向后台发送请求

最后的回调函数会执行轻提示组件给用户提示结果

4.总结

这段时间的vue框架学习非常有意思

又向未知的世界前进了一步

慢慢的能打造出属于自己的小作品感觉很有成就感

学习中感受到了很多不足欢迎交流指教谢谢！

一天完成移动端Cell布局及登录功能展示

张*

js,web,前端，vue，vant

应用vue中的vant ui框架进行简单的布局展示和登录功能

2020.08.24

920人

张*

天津市河东区

Hot:8460

张*

当前作品暂无评分

还未获得评语哦~