wex5 实战 苹果左滑删除与长按编辑
用了多年苹果,习惯了苹果的左滑删除与长按编辑,特别是短信什么的,很多安卓界面也采用了类似方式。
我的想法突如其来,用wex5也设计一个这样的功能,可以吗?
那句广告词,没有什么不可能。
呵呵。
一 效果演示:
左滑删除
长按编辑
取消复原
二 设计思路:
利用jquery监听touch事件,结合wex5的事件,触发当前行数据操作与当前行dom对像的样式编辑
三 左滑删除 代码实现:
1 为list中的当前行绑定touchStart 和 touchMove 事件
2 touchStart 和 touchMove 事件与jquery事件套用
用wex5的touchstart事件,得到list中的 当前行数据与dom对像,为对像添加jquery的touch事件
(注)当前行数据this.row = event.bindingContext.$object;
当前行dom对像 var rowCss = event.currentTarget;
3 左滑删除
删除当前行数据并刷新
四 长按编辑
1 用row的列宽与buttongroud设置组件
2 为当前行绑定mousedown事件
3 css 样式
4 长按变更样式,弹出按钮
5 取消,恢复原状
五 总结
设计思路简单,把wex5与jquey有机结合,代码更简结。
相关视频制作完成,上传优酷。教学app制作中。我是邯郸戏曲开发,tel:15175073123,qq:1017945251
扫描二维码,看高清教学视频。