通过中继器实现简单的聊天功能(附带文本域字数限制功能)

0 评论 2360 浏览 1 收藏 5 分钟

编辑导语:如何通过中继器实现一个简单的聊天功能呢?本文作者通过自己的实操,为我们进行了分享总结,其中还附带了文本域字数限制功能,希望看后能够对你有所帮助。

大家好,我是大马猴,今天给大家带来一个简单的聊天功能,通过中继器的形式来实现。

下面看看动态演示效果:

一、准备组件

  1. 中继器里面放2个图片当头像,2文本标签,当内容;
  2. 动态面板2个嵌套,中继器放在最里面,2个动态面板是为了隐藏下滑条;
  3. 第一组文本标签2个,一个用来做文本长度,一个用来做文本限制;
  4. 单选按钮组,用于角色切换;
  5. 文本域,用来输入消息,及文字字数限制;
  6. 第二组文本标签两个,用于做获取字体数量;
  7. 单文本标签一个,用于做为空提示;
  8. 按钮一个,用于做发送,为中继器增加行。

如图:

二、教程开始

1. 拖拽一个中继器,里面放2个图片、放2个文本标签(2个文本分别起名聊天1、聊天2),对应的中继器属性里起好名字,liaotian1、liaotian2、tupian1、tupian2,并且做好每逢加载事件。

如图:

2. 给中继器外面套入2个动态面板,2个动态面板用于隐藏滚动条,如图:

3. 拖拽2个文本标签,一个起名xianzhi、一个起名changdu,都隐藏待用。

4. 拖拽2个单选按钮,用于角色切换。

5. 拖拽文本域、再拖拽2个文本标签放置左下角,一个起名获取,一个文本里的文字直接修改为/50,放置文本域左下角。

6. 对文本域做事件,当文本改变时,设置文本changdu等于这个文本域,添加判断1如果文字长度>=0并且<=50,设置获取=0+changdu的局部变量。

判断2如果文字长度>50设置文字changdu=焦点文字,设置焦点文字xianzhi截取前50个字符长度。

如图:

7. 拖拽一个文本标签,内容写上不能为空,调整字体颜色为红色,设为隐藏,并且设置显示时,等待1500毫秒隐自己,待用。

8. 拖拽一个按钮,点击事件,添加判断1,如果文本域为空时,显示不能为空文本标签。判断2,或者如果选中状态是单选按钮1,为中继器liaotian1、tupian1、添加行。

如图:

继续判断3,或者如果选中状态是单选按钮2,为中继器liaotian2、tupian2、添加行,同上图。

继续事件4,点击后,设定文本域为空。

如图:

三、教程完毕

以上教程如果不做字数限制, 3、5、6步骤可以省却,用文本框代替即可。欢迎大家多多关注我,我会给大家带来更多更好的高保真小案例作品。

预览地址:https://4usnja.axshare.com

链接:https://pan.baidu.com/s/1JbXYgzSSD8c0P_Bz6zCrnA

提取码:damh

 

本文由 @大马猴 原创发布于人人都是产品经理,未经作者许可,禁止转载。

题图来自Unsplash,基于CC0协议。

给作者打赏,鼓励TA抓紧创作!
更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!