柿饼UI -- 登录界面

2019-3-11 21:28 [复制链接] 5 1303

本帖最后由 Glen_Young 于 2019-3-11 21:31 编辑 - V3 d7 |2 b  b% W0 P" s$ w
; T8 v' q  v) w$ u
   周末闲着就利用柿饼模组做了一个简单的登录界面,由于时间有限,没有加入注册功能,之后再加。$ h$ c3 t4 `5 ]% c  T9 ?
   界面如下:3 W0 H" a# w$ c" p5 r# q" P
截图1.png ; O! ]# B2 ]; m* ^4 ?$ p: E3 y1 M! Q

. ^8 \* h. x. N) l   使用到的控件如下框框所标数字:
. A" Q6 v- ~0 ?! D 截图2.png 4 H( {$ m$ V+ i* N
  其中
& v% H# v7 I! _/ T( f& f4 E$ K  序号1使用的是Textbox控件。(官方文档:Textbox控件是文本输入框控件,由label和键盘组成。当用户点击Textbox时,能够自动跳转到键盘输入界面,并能够修改文本内容。目前Textbox仅支持输入ASCII码字符。)- T5 w0 G: Q0 Q9 X% U
  通过js代码获取输入到Textbox控件的数据,代码如下:
2 H/ ?, Y2 K+ `" G0 s- x) | + @4 m2 z! y% ?& m! M2 T2 O' j
  1. onTextChange1 : function(event){
    & Y, Y: y$ w7 C3 R6 a- y5 k4 m$ @6 D1 Z7 f
  2.       text1 = event.detail.value; //获取Textbox的当前文本内容& N% E" z/ H$ b2 |+ \( i
  3.     },
    5 k5 r* H0 F& k+ R

  4. ! ~6 f6 k% b2 G4 s/ I, H
  5.     onTextChange2 : function(event){
    ' ~$ O, p6 M/ B0 K1 x0 F- t/ W7 {+ k
  6.       text2 = event.detail.value; //获取Textbox的当前文本内容% W6 X* K7 ~1 _* E6 |
  7.     },
复制代码
; }2 N+ H1 z( T; v# c( C4 p7 e9 u
  序号2是Button控件,Button是按钮控件。当该控件被触碰到时,能够触发相应的事件。 我们在触发事件中比较输入的用户名和密码与预设的是否相同,相同则进入主界面,否则提示错误。' j7 z' I" i/ V/ R; ~
js代码如下:# M- b+ w' |8 ]# V" G4 V; B& H
  1. /*button1  触发事件函数 */! ?* I) w8 Y$ h
  2.     onMain:function(event){
    ' P- w0 q/ o8 e2 C
  3.    if((text1 == "rtt") && (text2 == "young"))% ]# l' O: J) |# |# U
  4.   {6 a' v: _3 e* e9 ^5 _6 ]: n3 N
  5.         pm.navigateTo('page2/page2');//跳转到页面2,主界面. J0 Q% ^- t; M; g" c: O9 g
  6.   }* \* Q' ~  R, k! y
  7.   else
    1 Z8 ^7 p( K) @
  8.   {
    * y! T  T1 e9 N  v5 n$ l6 e" n9 Z
  9.      pm.navigateTo('page4/page4');//跳转到页面4,错误提示界面; i+ t$ [4 E0 e/ T4 t- b4 q6 ~/ }) F6 Q
  10.   }
复制代码
序号3只是个图片控件,放入的是RT-Thread的log。
8 t+ ?$ n1 l6 G1 e7 f1 B: a
. ~9 W8 l8 h5 M2 i1 S  C  具体的效果如下gif所示,其实效果还是蛮清晰的,只是经过手机拍摄和格式转换之后,效果有些模糊和残影。. R1 X9 U. S8 b  G" l
  输入错误的结果:) v/ p$ J8 _! v7 N& w) ~
Video_20190311211953.gif
7 P- g9 ~/ I, \% Y9 _8 Q" R! E+ o7 {0 o
  输入成功:
, O/ ~" B! G; l9 t: t, I* f* Q& t% ~   VID_20190311_212219_20190311212543.gif
; k: V! @; {/ G7 t# \* T. ~; p
; B/ |2 O8 G  h1 ?0 ^) @6 T9 \% Z; j7 d5 |6 N8 Q. k6 C
   吐槽一下:传大点的gif不成功,说好的大小不限制的呢?
( S* Z6 v' @, ]. _' B; a- M/ C   截图12.png
5 g; H$ {% g3 S1 ]1 p! f( i, P! A- t" A! G3 h1 I9 ]( D; h. O

' v) G3 u+ w, Y  工程文件: TitanUI.7z (1.81 MB, 下载次数: 292)
使用道具 举报 显示全部楼层 回复
最新评论 | 正序浏览
显示全部楼层 |楼层直达:
发表于 2019-3-11 22:10:19 | 显示全部楼层
这个不错!
使用道具 举报 回复
发表于 2019-3-11 22:19:42 | 显示全部楼层
aozima 发表于 2019-3-11 22:10
3 c# u, k# s' o这个不错!
& _( l) Y5 }0 N) k
实现的功能比较简单,后期再完善
使用道具 举报 回复
发表于 2019-3-14 09:30:21 | 显示全部楼层
做成滑动解锁
使用道具 举报 回复
发表于 2019-4-13 10:33:00 | 显示全部楼层
做成滑动解锁+1
使用道具 举报 回复
发表于 2019-4-19 08:52:14 | 显示全部楼层
bevis 发表于 2019-3-14 09:30% T) t4 J! h3 Z- a3 n) O7 x
做成滑动解锁
" `) A, b  K7 A/ B) J' @
好奇,怎么个滑动解锁法,有密码核对环节吗
使用道具 举报 回复
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|RT-Thread开发者社区 ( 沪ICP备13014002号-1

有害信息举报电话:021-31165890 手机:18930558079

© 2006-2019 上海睿赛德电子科技有限公司

Powered by RT-Thread

快速回复 返回顶部 返回列表