egret之好友列表(滑动列表)
本文采用List+Scroller实现列表滑动功能
首先新建两个皮肤,一个用做好友界面的显示,一个用作单个好友的显示,新建皮肤如下:
皮肤一取名为:wxMainSkin,添加如下控件
皮肤一取名为:wxMainSkin,添加如下控件
新建ts脚本,添加如下代码:
// TypeScript file
class WxMainPanel extends eui.Component { private listFriends: eui.List;
private scrListFriends: eui.Scroller; public constructor() {
super();
this.skinName = "wxMainSkin";
this.init();
} private init() {
var dp: eui.ICollection = this.listFriends.dataProvider;
/// 填充数据
var dsListFriends: Array<Object> = [
{ icon: "Scene_BaiQin_jpg", friendName: "伊文捷琳", comment: "评价:樱桃小丸子", heart:"Scene_BaiQin_jpg" }
, { icon: "Scene_BaiQin_jpg", friendName: "亚特伍德", comment: "评价:离了我你不行的", heart:"Scene_BaiQin_jpg" }
, { icon: "Scene_BaiQin_jpg", friendName: "伊妮德", comment: "评价:猴子请来的逗比", heart:"Scene_BaiQin_jpg" }
, { icon: "Scene_BaiQin_jpg", friendName: "鲁宾", comment: "评价:我勒个去", heart:"Scene_BaiQin_jpg" }
, { icon: "Scene_BaiQin_jpg", friendName: "威弗列德", comment: "评价:这货碉堡了", heart:"Scene_BaiQin_jpg" }
, { icon: "Scene_BaiQin_jpg", friendName: "史帝文", comment: "评价:咖啡不加糖", heart:"Scene_BaiQin_jpg" }
, { icon: "Scene_BaiQin_jpg", friendName: "哈瑞斯", comment: "评价:猪一样的队友", heart:"Scene_BaiQin_jpg" }
, { icon: "Scene_BaiQin_jpg", friendName: "亚特伍德", comment: "评价:离了我你不行的", heart:"Scene_BaiQin_jpg" }
, { icon: "Scene_BaiQin_jpg", friendName: "伊妮德", comment: "评价:猴子请来的逗比", heart:"Scene_BaiQin_jpg" }
, { icon: "Scene_BaiQin_jpg", friendName: "鲁宾", comment: "评价:我勒个去", heart:"Scene_BaiQin_jpg" }
, { icon: "Scene_BaiQin_jpg", friendName: "威弗列德", comment: "评价:这货碉堡了", heart:"Scene_BaiQin_jpg" }
, { icon: "Scene_BaiQin_jpg", friendName: "史帝文", comment: "评价:咖啡不加糖", heart:"Scene_BaiQin_jpg" }
, { icon: "Scene_BaiQin_jpg", friendName: "哈瑞斯", comment: "评价:猪一样的队友", heart:"Scene_BaiQin_jpg" }
, { icon: "Scene_BaiQin_jpg", friendName: "亚特伍德", comment: "评价:离了我你不行的", heart:"Scene_BaiQin_jpg" }
, { icon: "Scene_BaiQin_jpg", friendName: "伊妮德", comment: "评价:猴子请来的逗比", heart:"Scene_BaiQin_jpg" }
, { icon: "Scene_BaiQin_jpg", friendName: "鲁宾", comment: "评价:我勒个去", heart:"Scene_BaiQin_jpg" }
, { icon: "Scene_BaiQin_jpg", friendName: "威弗列德", comment: "评价:这货碉堡了", heart:"Scene_BaiQin_jpg" }
, { icon: "Scene_BaiQin_jpg", friendName: "史帝文", comment: "评价:咖啡不加糖", heart:"Scene_BaiQin_jpg" }
, { icon: "Scene_BaiQin_jpg", friendName: "哈瑞斯", comment: "评价:猪一样的队友", heart:"Scene_BaiQin_jpg" }
, { icon: "Scene_BaiQin_jpg", friendName: "亚特伍德", comment: "评价:离了我你不行的", heart:"Scene_BaiQin_jpg" }
, { icon: "Scene_BaiQin_jpg", friendName: "伊妮德", comment: "评价:猴子请来的逗比", heart:"Scene_BaiQin_jpg" }
, { icon: "Scene_BaiQin_jpg", friendName: "鲁宾", comment: "评价:我勒个去", heart:"Scene_BaiQin_jpg" }
, { icon: "Scene_BaiQin_jpg", friendName: "威弗列德", comment: "评价:这货碉堡了", heart:"Scene_BaiQin_jpg" }
, { icon: "Scene_BaiQin_jpg", friendName: "史帝文", comment: "评价:咖啡不加糖", heart:"Scene_BaiQin_jpg" }
, { icon: "Scene_BaiQin_jpg", friendName: "哈瑞斯", comment: "评价:猪一样的队友", heart:"Scene_BaiQin_jpg" }
];
this.listFriends.dataProvider = new eui.ArrayCollection(dsListFriends); this.listFriends.itemRenderer = friendsList;
}
protected createChildren() {
}
} class friendsList extends eui.ItemRenderer { public selectBtn: eui.Button; constructor() {
super();
this.skinName = "friendsListIRSkin";
} protected createChildren(): void {
super.createChildren();
}
protected dataChanged(): void {
this.selectBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, () => {
console.log("名字·····"+this.data.friendName);
console.log("信息·····"+this.data.info);
}, this);
}
}
运行效果如下:
需要demo的请点击右侧加群下载
egret之好友列表(滑动列表)的更多相关文章
- Unity3d NGUI的使用(九)(UIScrollView制作滑动列表)
UIScrollView制作滑动列表,可横向,竖直展示一些列表在固定可视范围内 UIScrollVIew只是一个可滑动的UI组件 如果需要制作复杂的可视区域UI需要配合使用UIPanel与UIGrid ...
- 使用泛型简单封装NGUI的ScrollView实现滑动列表
懒,是老毛病了,周末跑了半马,跑完也是一通累,好久没锻炼了..也是懒的,有时都懒的写博客..最近看到项目中各种滑动列表框,本着要懒出水平来的原则,决定花点时间简单处理下(暂时未做列表太多时的优化):1 ...
- Android滑动列表(拖拽,左滑删除,右滑完成)功能实现(2)
ItemTouchHelper类 之前我们实现了滑动列表的一些基本功能,为了实现更多的效果,我们来仔细看一下ItemTouchHelper中的类: ItemTouchHelper.SimpleCall ...
- [转]ionic3项目实战教程三(创建provider、http请求、图文列表、滑动列表)
本文转自:https://blog.csdn.net/lyt_angularjs/article/details/81145468 版权声明:本文为博主原创文章,转载请注明出处.谢谢! https:/ ...
- [UGUI]滑动列表优化(循环利用)
需要注意的有下面几点: 1. 区分好表现上的index和逻辑上的index.表现上的index是指这个go是go列表中的第几项,但实际上这个index的意义并不大,因为在滚动的过程中go列表是轮转的: ...
- [iOS] 列表滑动展开隐藏头部HeaderView
平常遇到大多数的带有列表的应用都会遇到这个场景:在列表顶端有一个Header,当向上滑动列表时,压缩header,向下滑动列表到头时,展开header.这种样式在例如微博,twitter这些展示动态的 ...
- Android 编程下代码之(QQ消息列表滑动删除)
这份代码写出来有些时候了,一直没共享,现在把它共享给大家.简单列一下代码中你可以学到的知识点: 自定义控件的实现方式: 事件的拦截分发消费机制: QQ会话列表滑动删除原理: 最后附上源码链接:Q ...
- uwp ListView列表滑动特效
在看过一篇文章 WPF自定义控件之列表滑动特效 PowerListBox http://www.cnblogs.com/ShenNan/p/4993374.html#3619585 实现了滑动的特效 ...
- Ionic 2 :如何实现列表滑动删除按钮
http://blog.csdn.net/h254532699/article/details/54382123 使用Ionic这种框架伟大的地方在于用户界面元素默认准备好了,意味着你可以设计更好的a ...
随机推荐
- 十三、asp.net中Repeater控件用法笔记
大家可能都对datagrid比较熟悉,但是如果在数据量大的时候,我们就得考虑使用 repeater作为我们的数据绑定控件了.Repeater控件与DataGrid (以及DataList)控件的主要区 ...
- 小白学python-day02-二进制、计算机单位、编程语言分类介绍、
今天是第二天,以下是学习内容总结. 但行努力,莫问前程. ----------------------------------------------------------------------- ...
- Flutter学习笔记(11)--文本组件、图标及按钮组件
如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 文本组件 文本组件(text)负责显示文本和定义显示样式,下表为text常见属性 Text组件属性及描述 属性名 类型 默认 ...
- mysql添加外键失败解决方案
mysql重启命令: [root@wshCentOS centOS7Share]# service mysqld stopRedirecting to /bin/systemctl stop mys ...
- 100天搞定机器学习|Day8 逻辑回归的数学原理
机器学习100天|Day1数据预处理 100天搞定机器学习|Day2简单线性回归分析 100天搞定机器学习|Day3多元线性回归 100天搞定机器学习|Day4-6 逻辑回归 100天搞定机器学习|D ...
- Android的简述
程序截图 先来简单了解下程序运行的效果 程序入口点 类似于win32程序里的WinMain函数,Android自然也有它的程序入口点.它通过在AndroidManifest.xml文件中配置来指明, ...
- handlerAdapter与方法返回值的处理
前提:处理器方法被调用并返回了结果 public void invokeAndHandle(ServletWebRequest webRequest, ModelAndViewContainer ma ...
- FD limit (65535) too low for maxconn=65535/maxsock=131084.Please raise 'ulimit-n' to 131084 or more to avoid any trouble.
在安装完Haproxy启动时报错,诸如:FD limit (65535) too low for maxconn=65535/maxsock=131084.Please raise 'ulimit-n ...
- Python-默背单词
数据库单词: 默认单词 单词说明 innodb 事务,主键,外键,tree,表行锁 myisam 主要以插入读取和插入操作 memory 所有数据保存在内存中 ACID 原子性,一致性,隔离性,持 ...
- 【React踩坑记三】React项目报错Can't perform a React state update on an unmounted component
意思为:我们不能在组件销毁后设置state,防止出现内存泄漏的情况 分析出现问题的原因: 我这里在组件加载完成的钩子函数里调用了一个EventBus的异步方法,如果监听到异步方法,则会更新state中 ...