Question

手指移动事件监听

本文将向您介绍如何使用 BindingX 提供的手势能力来完成流畅的交互效果。如果您还不了解 BindingX 的工作原理，强烈建议先阅读文档 《简介》以及 《核心概念》。

特性介绍

BindingX 目前仅支持 pan 手势，您只需要在 bind 方法中将 eventType 的值设置为 pan 即可使用。 bindingX 提供了x和y两个预置变量，可以参与表达式运算，这两个变量的含义分别是手指移动过程中横向和纵向的偏移量，具体可以参考文档 《支持的事件类型》。

如何使用

下面通过一个简单的例子来介绍如何使用。我们的任务是实现一个"卡片侧滑删除"的效果。

注意: 我们的例子使用weex实现，上层DSL选用Rax。

第一步: 使用Rax编写卡片布局

Rax 提供了类似 ReactJS 的语法，如果您还不了解，可以移步他们的 官方网站 进行学习。 首先，您需要使用Rax-CLI工具创建一个新的Rax工程。然后就可以开始编写页面模板了。创建一个文件，命名为index.js，增加如下代码:

import {createElement, Component, render} from 'rax';
import Text from 'rax-text';
import View from 'rax-view';

class App extends Component {
  render() {
  }
}
render(<App />);

然后在当前文件夹下创建一个新文件，命名为index.css，用于编写样式。然后在index.js中引入该样式文件。

import {createElement, Component, render} from 'rax';
import Text from 'rax-text';
import View from 'rax-view';

import './index.css';

随后，我们在index.js中基于JSX语法编写卡片的布局，并在index.css中编写相关样式。

index.js

class App extends Component {
  render() {
    return (
      <div className="container" >
        <div className="border">
          <div class="box">
            <div className="head">
              <div className="avatar"></div>
              <text className="username">Foo</text>
            </div>
            <div className="content">
              <text className="desc">Weex is a framework for building Mobile cross-platform UI. Rax is a universal JavaScript library with a largely React-compatible API.</text>
            </div>
            <div className="footer">
              <text className="action">SHARE</text>
              <text className="action" style={{color:'#7C4DFF'}}>EXPLORE</text>
            </div>
         </div>
        </div>
      </div>
    );
  }
}

index.css

 .container {
    flex: 1;
    background-color:#eeeeee;
  }
  .border{
    height:1000;
    padding-left:35;
    padding-right:35;
    padding-top:100;
  }
  .box {
    width: 680;
    height: 450;
    background-color:#651FFF;
  }
  .head {
    background-color:#651FFF;
    width:680;
    height:120;
    flex-direction:row;
    align-items:center;
  }
  .content{
    width:680;
    height:240;
    background-color:#651FFF;
    padding-left:24;
    padding-top:24;
    padding-right:24;
    box-sizing:border-box;
  }
  .footer {
    width:680;
    height:90;
    background-color: #fff;
    align-items:center;
    justify-content:flex-end;
    padding-right:25;
    flex-direction:row;
    box-sizing:border-box;
  }
  .action {
    font-size:35;
    padding-right:20;
  }
  .desc {
    font-size:32;
    color:#fff;
    padding-left:24;
  }
  .avatar {
    width:96;
    height:96;
    border-radius:48;
    background-color:#CDDC39;
    margin-left:36;
    margin-right:48;
  }
  .username {
    color:#fff;
    font-size:32;
  }

现在，我们的卡片布局已经编写完毕，您可以编译、预览效果。如果没有问题，就可以进行下一步了！

第二步: 引入BindingX组件

1. 首先通过npm安装依赖。

$ npm install weex-bindingx --save

1. 在index.js的头部引入 BindingX 组件。

import {createElement, Component, render} from 'rax';
import Text from 'rax-text';
import View from 'rax-view';
import BindingX from weex-bindingx;

import './index.css';

第三步: 注册手势事件

1. 为卡片增加ref属性，用于唯一标识该组件，随后 BindingX 就可以基于ref找到该组件。

   render() {
       return (
         <div className="container" >
           <div className="border">
               <div ref='my' class="box" >
                 <div className="head">
                  <div className="avatar"></div>
                  <text className="username">Foo</text>
                 </div>
                 ...
               </div>
           </div>
         </div>
       );
   }

2. 为卡片注册 onTouchStart 事件，用于绑定表达式。

   onTouchStart = (event)=>{
   
   }
   
   render() {
       return (
         <div className="container" >
           <div className="border">
               <div class="box" onTouchStart={this.onTouchStart}>
                 <div className="head">
                  <div className="avatar"></div>
                  <text className="username">Foo</text>
                 </div>
                 ...
               </div>
           </div>
         </div>
       );
   }

第四步: 实现卡片拖拽效果

很显然，横滑的表达式应该是 x+0 ，要改变的属性是 transform.translateX 。手势绑定的代码如下:

gesToken=0;

onTouchStart = (event)=>{
    var my = this.refs.my;
    var gesTokenObj = BindingX.bind({
          anchor:my,
          eventType:'pan',
          props: [
              {
                element:my, 
                property:'transform.translateX',
                expression:'x+0'
              }
            ]
        }, function(e) {
          // nope
        });
     this.gesToken = gesTokenObj.token;
}

重新编译、执行代码，您应该就能横向拖拽卡片了！到这里，我们已经完成了大部分的效果，使用 BindingX 就是这么简单。

第五步: 增加透明度变化

现 在，我们在原来的基础上，再增加一个需求。手指在横滑的过程中，我们希望卡片的透明度也跟着变化。卡片的透明度对应的属性是opacity，值的范围是0 到1，因此，我们表达式的计算结果应该是0到1之间。在这个例子里，我们假设希望手指横向滑动600个单位，透明度变为0，那么表达式应该是 1-abs(x)/600 。

我们在props中再增加一段配置:

gesToken=0;

onTouchStart = (event)=>{
    var my = this.refs.my;
    var gesTokenObj = BindingX.bind({
          anchor:my,
          eventType:'pan',
          props: [
              {
                element:my, 
                property:'transform.translateX',
                expression:'x+0'
              },
              {
                element:my, 
                property:'opacity',
                expression:'1-abs(x)/600'
              }
            ]
        }, function(e) {
          // nope
        });
     this.gesToken = gesTokenObj.token;
}

重新编译、执行，您应该就能看到期望的效果啦!

最后

回 顾这个例子，我们给卡片绑定了两个表达式，分别用于控制卡片的位移以及透明度，当手指在卡片上横向移动时，就会触发对应的表达式，进而改变卡片的位置以及 透明度。然而，这个例子仍然不完善，因为当我们的手指释放时，卡片也停住不动了，而我们希望卡片能够根据结束时的位置自动移除到屏幕外或者是回到原点。查 看下一篇教程 《动画》，我们来解决这个问题。