手把手教你系列- 卡片拖拽手势删除效果

背景介绍

手势效果是终端开发的常见需求，这篇文章手把手教你如何快速实现一个手势功能。最终效果first

项目初始化

新建一个项目 demo-gesture

  1. cml init project

进入项目

  1. cd demo-gesture

设计数据结构

我们要做一个列表，所以先设计一个数据结构如下：

  1. data = {
  2.     list: [
  3.         {
  4.             // 用作样式名称
  5.             className: 'inner-first',
  6.             // 用作元素位置偏移
  7.             transform: {
  8.                 y: 0,
  9.                 x: 0
  10.             } ,
  11.         }
  12.     ]
  13. }

写进/src/pages/index/index.cml文件里面逻辑层JS代码里面

  1. <script>
  2. class Index  {
  3.   data = {
  4.     list: [
  5.       {
  6.         className: 'inner-first',
  7.         transform: {
  8.           y: 0,
  9.           x: 0
  10.         }
  11.       },
  12.       {
  13.         className: 'inner-second',
  14.         transform: {
  15.           y: 0,
  16.           x: 0
  17.         } 
  19.       },
  20.       {
  21.         className: 'inner-third',
  22.         transform: {
  23.           y: 0,
  24.           x: 0
  25.         } 
  27.       },
  28.       {
  29.         className: 'inner-fouth',
  30.         transform: {
  31.           y: 0,
  32.           x: 0
  33.         } 
  35.       }
  36.     ],
  37.   }
  38.   methods = {
  40.   }
  41. }
  43. export default new Index();
  45. </script>

书写CML使用数据

我们查看CML文档使用列表渲染，

写进/src/pages/index/index.cml文件里面CML代码

  1. <template>
  2.     <view class="wrapper">
  3.       <view  c-for="{{list}}" c-for-index="idx" c-for-item="itemName" data-index="{{idx}}" class="box {{itemName.className}}" style="transform: translate({{itemName.transform.x}}, 0);" >
  4.         <text class="txt">{{idx}}</text>
  5.         <view class="remove-btn" data-index="{{idx}}">
  6.           <text class="rm">删</text>
  7.         </view>
  8.       </view>
  9.     </view> 
  10. </template>

书写CMSS

查看CMSS文档，CMSS针对多端情况只能使用 flex 给页面布局，

  1. .wrapper{
  2.   flex-direction: col;
  3.   justify-content: space-around;
  4.   height: 1200cpx;
  5. }
  6. .inner-first{
  7.   background: red;
  9. }
  10. .inner-second{
  11.   background: yellow;
  12. }
  13. .inner-third{
  14.   background: blue;
  15. }
  16. .inner-fouth{
  17.   background: green;
  18. }
  19. .box{
  20.   height: 200cpx;
  21. }
  22. .txt{
  23.   text-align: center;
  24.   line-height: 50cpx;
  25.   height: 50cpx;
  26. }
  27. .remove-btn{
  28.   height: 50cpx;
  29.   width: 50cpx;
  30.   border: 1px solid hotpink;
  31.   font-size: 10cpx;
  32.   border-radius: 50cpx;
  33.   transform: translate(780cpx, 0)
  34. }
  35. .rm{
  36.   text-align: center;
  37.   line-height: 50cpx;
  38.   color: hotpink;
  39. }

目前三端效果展现如下

first

添加手势

我们查看事件绑定文档

给box元素添加事件绑定：

  1. c-bind:touchstart="eventhandler" 
  2. c-bind:touchmove="eventhandler"  
  3. c-bind:touchend="eventhandler"

添加事件回调函数

  1. methods = {
  2.     eventHandler(event){
  3.       // 获取当前手指位置
  4.       let myPreX = event.changedTouches[0].pageX;
  5.       // 获取当前手指所触摸的Item元素
  6.       let index = event.currentTarget.dataset.index;
  7.       // 获取当前手指所触摸的Item元素的偏移值
  8.       let transform = this.list[index].transform;
  9.       if(index >= this.list.length) {
  10.         return;
  11.       }
  12.       console.log(index);
  13.       // 手指触摸开始时将上一个X方向偏移设为null
  14.       if(event.type == 'touchstart'){
  15.         preX = null;
  16.       }else if( event.type == 'touchmove'){
  17.         if(preX !== null){
  18.           let x = parseInt(transform.x) + myPreX - preX ;
  19.           //x < 0 当手指往右滑动时不允许移动滑块 
  20.           // > 100 当手指往左滑动超过100时不允许滑动滑块
  21.             if(Math.abs(x) < 100 && x < 0){
  22.               //数据驱动视图更改
  23.               transform.x = x + 'cpx';
  24.             }
  25.         }
  26.         // 保存最后的位置
  27.         preX = myPreX;
  28.       }else if(event.type == 'touchend'){
  29.         if(Math.abs(parseInt(transform.x)) < 90){
  30.           transform.x = 0;
  31.         }
  32.       }
  33.     }
  34. }

添加删除按钮事件回调函数

给remove-btn元素添加事件绑定：

  1. c-bind:click="onRemove"
  1. methods = {
  2.     onRemove(e){
  3.       let index = e.currentTarget.dataset.index;
  4.       this.list.splice(index, 1);
  5.     }
  6. }

/src/pages/index/index.cml 最终全部代码如下：

  1. <template>
  2.     <view class="wrapper">
  3.       <view  c-for="{{list}}" c-for-index="idx"  c-for-item="itemName" data-index="{{idx}}" class="box {{itemName.className}}" style="transform: translate({{itemName.transform.x}}, 0);" 
  4.       c-bind:touchstart="eventHandler" 
  5.       c-bind:touchmove="eventHandler"  
  6.       c-bind:touchend="eventHandler"
  7.       >
  8.         <text class="txt">{{idx}}</text>
  9.         <view class="remove-btn" c-bind:click="onRemove" data-index="{{idx}}" >
  10.           <text class="rm" >删</text>
  11.         </view>
  12.       </view>
  13.     </view> 
  14. </template>
  16. <script>
  17. let preX = null;
  18. class Index  {
  19.   data = {
  20.     list: [
  21.       {
  22.         className: 'inner-first',
  23.         transform: {
  24.           y: 0,
  25.           x: 0
  26.         }
  27.       },
  28.       {
  29.         className: 'inner-second',
  30.         transform: {
  31.           y: 0,
  32.           x: 0
  33.         } 
  35.       },
  36.       {
  37.         className: 'inner-third',
  38.         transform: {
  39.           y: 0,
  40.           x: 0
  41.         } 
  43.       },
  44.       {
  45.         className: 'inner-fouth',
  46.         transform: {
  47.           y: 0,
  48.           x: 0
  49.         } 
  51.       }
  52.     ],
  53.   }
  54.   methods = {
  55.     eventHandler(event){
  56.       // 获取当前手指位置
  57.       let myPreX = event.changedTouches[0].pageX;
  58.       // 获取当前手指所触摸的Item元素
  59.       let index = event.currentTarget.dataset.index;
  60.       // 获取当前手指所触摸的Item元素的偏移值
  61.       if(index >= this.list.length) {
  62.         return;
  63.       }
  64.       console.log(index);
  65.       let transform = this.list[index].transform;
  66.       // 手指触摸开始时将上一个X方向偏移设为null
  67.       if(event.type == 'touchstart'){
  68.         preX = null;
  69.       }else if( event.type == 'touchmove'){
  70.         if(preX !== null){
  71.           let x = parseInt(transform.x) + myPreX - preX ;
  72.           //x < 0 当手指往右滑动时不允许移动滑块 
  73.           // > 100 当手指往左滑动超过100时不允许滑动滑块
  74.             if(Math.abs(x) < 100 && x < 0){
  75.               //数据驱动视图更改
  76.               transform.x = x + 'cpx';
  77.             }
  78.         }
  79.         // 保存最后的位置
  80.         preX = myPreX;
  81.       }else if(event.type == 'touchend'){
  82.         if(Math.abs(parseInt(transform.x)) < 90){
  83.           transform.x = 0;
  84.         }
  85.       }
  86.     },
  87.     onRemove(e){
  88.       let index = e.currentTarget.dataset.index;
  89.       this.list.splice(index, 1);
  90.     }
  92.   }
  93. }
  95. export default new Index();
  97. </script>
  98. <style scoped>
  99. .wrapper{
  100.   flex-direction: col;
  101.   justify-content: space-around;
  102.   height: 1200cpx;
  103. }
  104. .inner-first{
  105.   background: red;
  107. }
  108. .inner-second{
  109.   background: yellow;
  110. }
  111. .inner-third{
  112.   background: blue;
  113. }
  114. .inner-fouth{
  115.   background: green;
  116. }
  117. .box{
  118.   height: 200cpx;
  119. }
  120. .txt{
  121.   text-align: center;
  122.   line-height: 50cpx;
  123.   height: 50cpx;
  124. }
  125. .remove-btn{
  126.   height: 50cpx;
  127.   width: 50cpx;
  128.   border: 1px solid hotpink;
  129.   font-size: 10cpx;
  130.   border-radius: 50cpx;
  131.   transform: translate(780cpx, 0)
  132. }
  133. .rm{
  134.   text-align: center;
  135.   line-height: 50cpx;
  136.   color: hotpink;
  137. }
  138. </style>
  139. <script cml-type="json">
  140. {
  141. }
  142. </script>

最终不到150行代码实现三端拖拽效果：first