柿饼UI -- 登录界面

发布于 2019-03-11 21:28:43
    本帖最后由 Glen_Young 于 2019-3-11 21:31 编辑


周末闲着就利用柿饼模组做了一个简单的登录界面,由于时间有限,没有加入注册功能,之后再加。
界面如下:
截图1.png

使用到的控件如下框框所标数字:
截图2.png
其中
序号1使用的是Textbox控件。(官方文档:Textbox控件是文本输入框控件,由label和键盘组成。当用户点击Textbox时,能够自动跳转到键盘输入界面,并能够修改文本内容。目前Textbox仅支持输入ASCII码字符。)
通过js代码获取输入到Textbox控件的数据,代码如下:

 onTextChange1 : function(event){
text1 = event.detail.value; //获取Textbox的当前文本内容
},

onTextChange2 : function(event){
text2 = event.detail.value; //获取Textbox的当前文本内容
},

序号2是Button控件,Button是按钮控件。当该控件被触碰到时,能够触发相应的事件。 我们在触发事件中比较输入的用户名和密码与预设的是否相同,相同则进入主界面,否则提示错误。
js代码如下:
/*button1  触发事件函数 */
onMain:function(event){
if((text1 == "rtt") && (text2 == "young"))
{
pm.navigateTo('page2/page2');//跳转到页面2,主界面
}
else
{
pm.navigateTo('page4/page4');//跳转到页面4,错误提示界面
}
序号3只是个图片控件,放入的是RT-Thread的log。

具体的效果如下gif所示,其实效果还是蛮清晰的,只是经过手机拍摄和格式转换之后,效果有些模糊和残影。
输入错误的结果:
Video_20190311211953.gif

输入成功:
VID_20190311_212219_20190311212543.gif


吐槽一下:传大点的gif不成功,说好的大小不限制的呢?
截图12.png


工程文件:下载附件[TitanUI.7z]




查看更多

关注者
0
被浏览
1.9k
5 个回答
Glen_Young
Glen_Young 2019-03-11
aozima 发表于 2019-3-11 22:10
这个不错!


实现的功能比较简单,后期再完善
Tonny
Tonny 2019-04-19
bevis 发表于 2019-3-14 09:30
做成滑动解锁


好奇,怎么个滑动解锁法,有密码核对环节吗

撰写答案

请登录后再发布答案,点击登录

发布
问题

分享
好友