wex5 实战 苹果左滑删除与长按编辑

用了多年苹果,习惯了苹果的左滑删除与长按编辑,特别是短信什么的,很多安卓界面也采用了类似方式。

我的想法突如其来,用wex5也设计一个这样的功能,可以吗?

那句广告词,没有什么不可能。

呵呵。

一  效果演示:

wex5 实战 苹果左滑删除与长按编辑

左滑删除

wex5 实战 苹果左滑删除与长按编辑

长按编辑

wex5 实战 苹果左滑删除与长按编辑

取消复原

wex5 实战 苹果左滑删除与长按编辑

二 设计思路:

利用jquery监听touch事件,结合wex5的事件,触发当前行数据操作与当前行dom对像的样式编辑

三  左滑删除  代码实现:

1   为list中的当前行绑定touchStart 和 touchMove 事件

wex5 实战 苹果左滑删除与长按编辑

2 touchStart 和 touchMove 事件与jquery事件套用

用wex5的touchstart事件,得到list中的 当前行数据与dom对像,为对像添加jquery的touch事件

wex5 实战 苹果左滑删除与长按编辑

(注)当前行数据this.row = event.bindingContext.$object;

当前行dom对像 var rowCss = event.currentTarget;

3  左滑删除

wex5 实战 苹果左滑删除与长按编辑

删除当前行数据并刷新

四  长按编辑

1 用row的列宽与buttongroud设置组件

wex5 实战 苹果左滑删除与长按编辑

2  为当前行绑定mousedown事件

wex5 实战 苹果左滑删除与长按编辑

3 css 样式

wex5 实战 苹果左滑删除与长按编辑

4  长按变更样式,弹出按钮

wex5 实战 苹果左滑删除与长按编辑

5   取消,恢复原状

wex5 实战 苹果左滑删除与长按编辑

五 总结

设计思路简单,把wex5与jquey有机结合,代码更简结。

上一篇:JMeter主要组件介绍


下一篇:Node.js中测试mysql的代码var client = mysql.createClient运行出错:TypeError: Object # has no method ‘createClient’