微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能


Posted in Javascript onDecember 06, 2019

实现类似ios端微信的左滑显示置顶、删除按钮的功能,首先需将按钮部分设为绝对定位,并且right设为负值溢出屏幕。利用小程序事件处理的api,分别读取触摸开始,触摸移动时,触摸结束的X/Y坐标,根据差值来改变整个卡片的位置。

这里有一个细节,为了防止按钮的点击干扰到卡片主部分的滑动,需要将整个卡片分为两部分。

<View style={`${positionStyle[index]}`}>
  <View 
    onTouchStart={this.moveTaskStart}
    onTouchMove={this.moveTask}
    onTouchEnd={this.moveTaskEnd}
  >
    这是主要的卡片部分
  </View>

  <View style="right: -260px;">这是滑动后出现的按钮部分</View>
</View>

这里使用的是Taro框架,方法与原生事件api一样,在开始滑动时分别存入X,Y坐标,在手指移动过程中计算移动的距离,当X的移动距离大于整个按钮部分的一班,展开按钮。

核心功能的实现,只需要分析X坐标即可,但因为用户可能在上下滑动过程中x坐标也会偏移造成按钮的展开,所以需要在move与end两部分都计算垂直坐标的改变与水平坐标改变形成的角度,当角度过大,视为上下滑动,按钮不展开。
完整代码如下:

moveTaskStart(e) {
  if (e.touches.length == 1) {
    //触摸屏上只有一个触摸点
    this.setState({
      // 开始触摸屏幕的X坐标
      startX: e.touches[0].clientX,
      startY: e.touches[0].clientY
    });
  }
}

moveTask(e) {
  if (e.touches.length == 1) {
    let moveX = e.touches[0].clientX;
    let moveY = e.touches[0].clientY;
    // 移动距离
    let disX = this.state.startX - moveX;
    let disY = this.state.startY - moveY;
    let angle = disY > 0 ? disY / disX : -disY / disX;
    let btnWidth = this.state.btnWidth;
    let txtStyle = "";
    if (disX == 0 || disX < 30) {
      //右滑动
      txtStyle = "left:0px";
    } else if(angle > 0.5) {
      return;
    } else if (disX > 30 && angle < 0.5) {
      txtStyle = `left: -${disX}px`;
      if (disX >= btnWidth) {
        //距离最大值
        txtStyle = `left: -${btnWidth}px`;
      }
    }
    let index = e.currentTarget.dataset.index;
    let list = this.state.positionStyle;
    this.setState({
      positionStyle: list
    });
  }
}

moveTaskEnd(e) {
  let txtStyle;
  if (e.changedTouches.length == 1) {
    let endX = e.changedTouches[0].clientX;
    let moveY = e.changedTouches[0].clientY;
    //移动距离
    let disX = this.state.startX - endX;
    let disY = this.state.startY - moveY;
    //移动角度
    let angle = disY > 0 ? disY / disX : -disY / disX;
    let btnWidth = this.state.btnWidth;
    //如果距离大于按钮宽度的一半,并且移动角度较小,显示按钮
    if(disX > (btnWidth / 2) && angle < 0.5) {
      txtStyle = `left:-${btnWidth}px`
    }else {
      txtStyle = "left:0px"
    }
    let index = e.currentTarget.dataset.index;
    let list = this.state.positionStyle;
    list[index] = txtStyle;
    this.setState({
      positionStyle: list
    });
  }
}

总结

以上所述是小编给大家介绍的微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript拓展DOM操作 prependChild insertAfert
Nov 17 Javascript
javascript开发技术大全 第4章 直接量与字符集
Jul 03 Javascript
jQuery提交多个表单的小例子
Jun 30 Javascript
JavaScript中使用Substring删除字符串最后一个字符
Nov 03 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
Dec 27 Javascript
Ajax和Comet技术总结
Feb 19 Javascript
基于JS实现仿百度百家主页的轮播图效果
Mar 06 Javascript
Vue.js仿Metronic高级表格(一)静态设计
Apr 17 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 Javascript
对 Vue-Router 进行单元测试的方法
Nov 05 Javascript
详解JS浏览器事件循环机制
Mar 27 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
Dec 06 #Javascript
微信小程序激励式视频广告组件使用详解
Dec 06 #Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
Dec 06 #Javascript
vue中监听路由参数的变化及方法
Dec 06 #Javascript
详解ECMAScript2019/ES10新属性
Dec 06 #Javascript
ES6的异步操作之promise用法和async函数的具体使用
Dec 06 #Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 #Javascript
You might like
兼容性最强的PHP生成缩略图的函数代码(修改版)
2011/01/18 PHP
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
PHP错误WARNING: SESSION_START() [FUNCTION.SESSION-START]解决方法
2014/05/04 PHP
php简单创建zip压缩文件的方法
2016/04/30 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
深入探秘jquery瀑布流的实现
2016/01/30 Javascript
JS实现Select的option上下移动的方法
2016/03/01 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
纯js实现隔行变色效果
2017/11/29 Javascript
12条写出高质量JS代码的方法
2018/01/07 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2018/05/04 Javascript
python中精确输出JSON浮点数的方法
2014/04/18 Python
Python中optionParser模块的使用方法实例教程
2014/08/29 Python
Python实现的数据结构与算法之快速排序详解
2015/04/22 Python
Python实现模拟时钟代码推荐
2015/11/08 Python
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
python使用psutil模块获取系统状态
2016/08/27 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
CSS3的颜色渐变效果的示例代码
2017/09/29 HTML / CSS
加拿大最大的箱包及旅游配件零售商:Bentley Leathers
2017/07/19 全球购物
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
一份软件工程师的面试试题
2016/02/01 面试题
实习老师个人总结的自我评价
2013/09/28 职场文书
英文简历中的自我评价
2013/10/06 职场文书
三问三解心得体会
2014/09/05 职场文书
创先争优演讲稿
2014/09/15 职场文书
Win11 BitLocker 驱动器加密
2022/04/19 数码科技
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python