uni-app开发初体验2(day1)

140 阅读1分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第1天,点击查看活动详情

这次我们要完成的是一个四级题库的我的页面以及登录页面的一小部分
  1. 首先,“我的”页面展示效果如下图:

image.png

  1. 我们先完成下面的一些uni-list-item,这里用到的组件具体的链接如:uniapp.dcloud.net.cn/component/u… ,然后我们修改下里面的名字,link to 里面加上对应需要跳转的页面地址,@click绑定一个点击事件进行页面间的互相跳转,然后事先在pages文件夹里面创建好对应的页面以及在pages.json文件中配置好页面名称

image.png

然后我们的列表就完成了,接下来就是这个登录组件的完成了。在这些列表上面添加个button按钮,内容为点击登录,并且创建一个login页面,给这个button按钮绑定一个页面跳转事件,跳转到我们的login页面上。

  1. 然后就是login页面的编写了,首先,我们的login页面大致展示样式如下图:

image.png

这个页面往下面滑动是一个具体的登录页面,具体的样子如下如:

image.png

  1. 第一个页面,由一张图片,一个手机号注册按钮,一个其他登录方式的分割线,三个登陆方式的icon图标组成,我们需要到阿里巴巴矢量库中找到这三个图标,图标库的链接:www.iconfont.cn/

  2. 找到后下载到static静态文件中,这些icon图标都准备好了之后就可以进行登录login页面的开发了。