微信/QQ聊天效果

实现效果:模拟微信或者QQ的聊天效果!

微信/QQ聊天

微信/QQ聊天

实现关键思路:

1、利用新建数据母版数据,来输出聊天得内容;

2、步骤一:创建一个数据母版,创建一个字段,例原型中得“内容”;

3、步骤二:把数据母版中的默认三条数据删除,并用数据网格把数据母版的内容显示在手机屏幕中;以上两步有不懂的可以参考数据母版教程:http://www.jmfans.com/archives/334

4、步骤三:调整数据网格的布局,隐藏表头,row_1自由布局,把row_1里面的input调整样式为聊天气泡式,往row_1添加聊天头像(把图片拖进row_1即可);

5、添加文本框和发送按钮,在发送按钮上添加事件:手指点击时-数据母版动作-新建,表达式为:new[内容=文本框];

6、其他一些细节的设计和调整,不明白得可加群咨询。

演示地址:http://www.jmfans.com/example/wxqqlt/index.html

原型下载请到QQ群下载:374358071,欢迎关注微信公众号:justinmind.

原文链接:,转发请注明来源!

发表评论

要发表评论,您必须先登录