weex开发小记(三)之pan手势

在元素上绑定pan事件时,有event对象中有changedTouches 数组,里面存放着TouchList

 //在浏览器中
changedTouches = [{
    clientX: 328,
    clientY: 84,
    force: 1,
    identifier: 0,
    pageX: 328,
    pageY: 84,
    radiusX: 11.5,
    radiusY: 11.5,
    rotationAngle: 0,
    screenX: 625,
    screenY: 231,
    target: {},
}]
// 在安卓中
changedTouches = [{"identifier":0,"pageX":535.59705,"pageY":84.64661,"screenX":532.8125,"screenY":239.0625}]
  1. screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角。
  2. clientX: 跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照点会随之滚动条的移动而移动。
  3. pageX:参照点也是浏览器内容区域的左上角,但它不会随着滚动条而变动

在我们判断手势滑动了多少距离时,应该相对于内容区域计算,在浏览器中用 clientX很合适,但是在安卓中没有这个属性。为了兼容web和安卓,使用pageX

在安卓中list元素绑定horizontalpan无效,因为list默认支持垂直滚动,但是horizontalpan是水平滑动,会有冲突。

滑动切换tab页面(以下只针对安卓APP)

  1. 需使用我改过后weexTabPage组件, 组件中主要监听 horizontalpan事件实现滑动切换
  2. list组件不支持horizontalpan事件
  3. scroller 组件支持 horizontalpan事件 (但是好像绑定了loadmore事件时就不支持了)。
  4. 需要滑动切换功能的页面中将list都改为scroller

注释:

  1. 不支持的原因应该是手势滑动方向的冲突。
  2. 在使用时如果某个tab页面有滚动加载数据且数据不为空时,是不能滑动切换的!!!

在tab页面中使用scroller组件如果组件容器中的元素存在点击事件,手指放在这些元素上可能不会触发下拉事件(也可能和页面的布局有关),但是list组件可以。

使用scroller 时,注册了上拉加载和下拉刷新时间,当上拉时会新执行下拉刷新操作。。。。换成list 容器就不会有这个问题。

你可能感兴趣的:(weex)