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


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 对话框和状态栏使用说明
Oct 25 Javascript
jquery URL参数判断,确定菜单样式
May 31 Javascript
jquery和js实现对div的隐藏和显示方法
Sep 26 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
node+experss实现爬取电影天堂爬虫
Nov 20 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 Javascript
vue观察模式浅析
Sep 25 Javascript
vue中过滤器filter的讲解
Jan 21 Javascript
JS实现移动端在线签协议功能
Aug 22 Javascript
浅谈javascript如何获取文件后缀名
Aug 07 Javascript
微信小程序实现页面监听自定义组件的触发事件
Nov 01 Javascript
jQuery实现广告显示和隐藏动画
Jul 04 jQuery
微信小程序添加插屏广告并设置显示频率(一天一次)
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中根据变量的类型 选择echo或dump
2012/07/05 PHP
PHP的基本常识小结
2013/07/05 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
php 调用ffmpeg获取视频信息的简单实现
2017/04/03 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
javascript与CSS复习(三)
2010/06/29 Javascript
避免回车键导致的页面无意义刷新的解决方法
2011/04/12 Javascript
Extjs4中Form的使用之本地hiddenfield
2013/11/26 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
2017/07/05 Javascript
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
vue中设置、获取、删除cookie的方法
2018/09/21 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
python读取xlsx的方法
2018/12/25 Python
浅谈Python爬虫基本套路
2019/03/25 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
应届生.NET方向面试题
2015/05/23 面试题
数控技术专业推荐信
2013/11/01 职场文书
行政助理的职责
2013/11/14 职场文书
网站设计师的岗位职责
2013/11/21 职场文书
企业业务员岗位职责
2014/03/14 职场文书
校长竞聘演讲稿
2014/05/16 职场文书
投标承诺函格式
2015/01/21 职场文书
大学生十八大感想
2015/08/11 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
python图片灰度化处理的几种方法
2021/06/23 Python
深入讲解Vue中父子组件通信与事件触发
2022/03/22 Vue.js