移动端左滑出现标记成未读及删除按钮

最新推荐文章于 2021-10-26 21:05:09 发布
最新推荐文章于 2021-10-26 21:05:09 发布
阅读量459 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaoxl0210/article/details/88531288
版权

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

<title>Document</title>

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<!-- <style>.contents {position: relative;height: 4rem;border-bottom: .01rem solid #ccc;margin-bottom: .2rem;overflow: hidden;}.w115 {width: 130%;}.package {height: 4rem;-webkit-transition: all 0.3s linear;transition: all 0.3s linear;}.lefti {width: 15%;height:4rem;position: absolute;top: 0;left: 0;}.leftimg {display: block;font-style: normal;margin: 1.3rem auto;height: 1.7rem;width: 1.7rem;border: .01rem solid #435057;background: #99beee;border-radius: 50%;line-height: 1.7rem;font-size: .13rem;color: #7a95a3;text-align: center;}.text {position: absolute;top: 0;left: 15%;width: 74%;height: 4rem;color: #7a95a3;font-family: "幼圆";font-size: .22rem;line-height: 4rem;}.delete {position: absolute;top: 0;right: -45%;width: 45%;-webkit-transition: all 0.5s linear;transition: all 0.5s linear;}.biao1{float:left;font-size: .22rem;text-align: center;line-height: 4rem;color: #fff;width:48%;height: 4rem;background: #ccc; -webkit-transition: all 0.5s linear;transition: all 0.5s linear;}.del1{float:left;font-size: .22rem;text-align: center;line-height: 4rem;color: #fff;width:30%;height: 4rem;background: red;-webkit-transition: all 0.5s linear;transition: all 0.5s linear;}.delete1 {position: absolute!important;top: 0!important;right: -35%!important;width:15%!important;font-size: .22rem!important;text-align: center!important;line-height: 4rem!important;color: #fff!important;height: 4rem!important;background: red!important;-webkit-transition: all 0.5s linear!important;transition: all 0.5s linear!important;}.swipeleft {-webkit-transition: all 0.5s linear;transition: all 0.5s linear;transform: translateX(-35%);-webkit-transform: translateX(-35%);}.pan{position:absolute;right:10px;line-height:4rem;color:rgb(138, 145, 145);}.swiperight {-webkit-transition: all 0.5s linear;transition: all 0.5s linear;transform: translateX(0%);-webkit-transform: translateX(0%);}</style> -->

<style>

.contents {

position: relative;

height: 4rem;

border-bottom: .01rem solid #ccc;

margin-bottom: .2rem;

overflow: hidden;

}

 

.w115 {

width: 130%;

 

}

 

.package {

height: 4rem;

-webkit-transition: all 0.3s linear;

transition: all 0.3s linear;

}

 

.lefti {

width: 15%;

height:4rem;

position: absolute;

top: 0;

left: 0;

}

 

.leftimg {

display: block;

font-style: normal;

margin: 1.3rem auto;

height: 1.7rem;

width: 1.7rem;

border: .01rem solid #435057;

background: #99beee;

border-radius: 50%;

line-height: 1.7rem;

font-size: .13rem;

color: #7a95a3;

text-align: center;

}

 

.text {

position: absolute;

top: 0;

left: 15%;

width: 74%;

height: 4rem;

color: #7a95a3;

font-family: "幼圆";

font-size: .22rem;

line-height: 4rem;

}

 

.delete {

position: absolute;

top: 0;

right: -45%;

width: 45%;

-webkit-transition: all 0.5s linear;

transition: all 0.3s linear;

}

.biao1{

float:left;

font-size: .22rem;

text-align: center;

line-height: 4rem;

color: #fff;

width:48%;

height: 4rem;

background: #ccc;

-webkit-transition: all 0.9s linear;

transition: all 0.9s linear;

}

.del1{

float:left;

font-size: .22rem;

text-align: center;

line-height: 4rem;

color: #fff;

width:30%;

height: 4rem;

background: red;

-webkit-transition: all 0.9s linear;

transition: all 0.9s linear;

}

.delete1 {

position: absolute!important;

top: 0!important;

right: -35%!important;

width:15%!important;

font-size: .22rem!important;

text-align: center!important;

line-height: 4rem!important;

color: #fff!important;

height: 4rem!important;

background: red!important;

-webkit-transition: all 0.9s linear!important;

transition: all 0.9s linear!important;

}

.swipeleft {

-webkit-transition: all 0.9s linear;

transition: all 0.9s linear;

transform: translateX(-35%);

-webkit-transform: translateX(-35%);

}

.pan{

position:absolute;right:10px;line-height:4rem;color:rgb(138, 145, 145);

}

.swiperight {

-webkit-transition: all 0.9s linear;

transition: all 0.9s linear;

transform: translateX(0%);

-webkit-transform: translateX(0%);

}

</style>

</head>

 

<body>

 

<div class="contents ">

<div class="package w115">

<div class="lefti">

<i class="leftimg">左滑</i>

</div>

<div class="text">左滑显示删除按钮左滑显示删除按钮</div><span class="pan">13:00</span>

<div class="delete delete1">删除

<!-- <div class="biao1">标记成未读</div> -->

<!-- <div class="del1 del2">删除</div> -->

</div>

</div>

</div>

 

<div class="contents ">

<div class="package w115">

<div class="lefti">

<i class="leftimg">左滑</i>

</div>

<div class="text">左滑显示删除按钮左滑显示删除按钮</div><span class="pan">13:00</span>

<div class="delete">

<div class="biao1">标记成未读</div>

<div class="del1">删除</div>

</div>

</div>

</div>

 

<div class="contents ">

<div class="package w115">

<div class="lefti">

<i class="leftimg">左滑</i>

</div>

<div class="text">左滑显示删除按钮左滑显示删除按钮</div><span class="pan">13:00</span>

<div class="delete">

<div class="biao1">标记成未读</div>

<div class="del1">删除</div>

</div>

</div>

</div>

 

<script>

var expansion = null; //是否存在展开的contents

var container = document.querySelectorAll('.contents .package');//找到所有的左滑盒子

for (var index = 0; index < container.length; index++) {

var x, y, X, Y, swipeX, swipeY;

//监听左滑盒子的触摸事件

container[index].addEventListener('touchstart', function (event) {

//获取触摸点的坐标targetTouches[0].pageX,Y 

x = event.changedTouches[0].pageX;

y = event.changedTouches[0].pageY;

swipeX = true;

swipeY = true;

if (expansion) {

//判断是否展开，如果展开则收起

expansion.className = "swiperight";

}

});

//监听左滑盒子的屏幕上滑动事件 touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。

container[index].addEventListener('touchmove', function (event) {

X = event.changedTouches[0].pageX;

Y = event.changedTouches[0].pageY;

//console.log(X,Y);

//判断左右滑动

if (swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0) {

// 阻止事件冒泡

event.stopPropagation();

if (X - x > 10) {   //右滑

event.preventDefault();  // 取消事件的默认动作

this.className = "swiperight";

}

if (x - X > 10) {   //左滑

event.preventDefault();

this.className = "swipeleft";   //左滑展开

expansion = this;

}

swipeY = false;

}

// 上下滑动

if (swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) {

swipeX = false;

}

})

}

</script>

</body>

 

</html>

 

趙小二啊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
手机移动端向左滑动出现删除菜单效果
06-16
在某一个列表项上面向左滑动，出现删除与编辑选项，向右滑动测消失。同时支持排它效果，保证同一时间只有一项为可显示菜单项。
仿照 QQ 的 cell 的左滑删除、置顶、标记未读效果
weixin_30693683的博客
10-10 101
侧滑删除、置顶、取消关注，在iOS8之前需要我们自定义，iOS8时苹果公司推出了新的API，UITableViewRowAction类，我们可以使用该类方便的制作出如下图的效果。 下面是实现的主要代码： // 必须写的方法（否则iOS 8无法删除，iOS 9及其以上不写没问题），和editActionsForRowAtIndexPath配对使用，里面什么不写...
彷QQ滑动删除效果—侧滑删除（置顶、标记、未读标记功能）
程序病毒小队的博客
01-12 1060
1：功能介绍QQ条目删除，主要实现的主条目和删除条目的 摆放，使用的类是ViewDragHelper2、布局页面 1.main的xml文件 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="
仿QQ拖动删除未读消息
10-06
模仿QQ用手指拖动删除红色气泡，博客地址：http://blog.csdn.net/gesanri/article/details/48490873
android实现桌面icon未读信息图标
龙哥IT
12-01 189
package com.example.headpull; import java.util.List; import android.content.Context; import android.content.Intent; import android.content.pm.PackageManager; import android.content.pm....
仿QQ拖动删除未读消息个数气泡
04-14
仿QQ拖动删除未读消息个数气泡 参考博客http://blog.csdn.net/gesanri/article/details/48490873
简单的未读消息数拖动和左滑删除的二种实现
06-21
简单的实现未读消息数小球的拖动和左滑删除的自定义ListView二中实现方式
仿照QQ微信左侧滑动删除条目完整demo
01-16
完全仿照QQ微信左侧滑动删除条目完整demo，里面有整套代码。
仿QQ消息列表左滑弹出菜单，标记已读和删除
09-27
仿QQ消息列表左滑弹出菜单，标记已读和删除；含entity、adapter等，如有问题请联系我。谢谢支持
移动端左滑出现删除按钮 练习
Amen的博客
01-19 6279
Document        Document            .contents{            position: relative;            height: 4rem;            border-bottom: .01rem solid #ccc;            margin-bottom: .2rem;            overflow
H5 实现类似QQ消息列表(已读，未读)拖拽点击事件功能
Aftery的博客
04-09 9501
HBulider实现消息列表，右侧滑动拖拽进行(已读，未读，删除)点击事件功能详情 首先第一步列表界面，并且列表上添加一个显示消息的标注；如：mui-badge； 对列表滑动拖拽事件； 拖拽事件上的标签进行监听以及逻辑的判断处理； 此功能牵涉到底部导航栏，类似QQ，底部会显示未读消息的总数； 通过事件的监听到总数，再进行本地存储，传给底部选项卡的标注处显示； 点击...
移动端左右滑动出现和隐藏按钮（适合vue和小程序开发）
weixin_43716010的博客
10-26 2235
在日常开发中，会碰到许许多多的样式布局，有时候用ui框架并不是特别的符合项目的需求，所以有的时候还是要自己亲自动手来写，这是一个简单的，左右滑动可以显示和隐藏删除按钮的一个小demo，大家可以相互学习学习，如果哪里表达的不太好，欢迎大家来指正，或者有更好的实现方法也可以评论，希望大佬们多多提意见。 首先来看一下效果图 首先先和大家说一下我的思路，最后把代码放到后边供大家参考 第一：首先我们先想一下应该怎样布局，肯定这个删除按钮是存在的，然后用户从右向左滑动的时候我们把它显示出来，然后从左向..
基于jQuery的左滑出现删除按钮
热门推荐
(ง •̀_•́)ง
06-05 4万+
最近在做项目的时候遇到了个需求，在网页上实现类似于QQ会话列表那样子的左滑出现删除按钮的效果，于是尝试着写了一个，写出来与大家交流分享，大神勿喷。基本要求由于我们是在做一个跨平台的APP，里面部分界面其实就是WebView加载的网页，因此需要使用网页实现这样的效果：往左滑动时，显示删除按钮，再往右滑，隐藏删除按钮。成品示例图额，先上图吧。下面分别是在PC浏览器里和在Mobile浏览器里的效果。PC浏
js移动端向左滑动出现删除按钮
weixin_34232744的博客
02-22 441
最近在做移动端项目时，需要实现一个列表页面的每一项item向左滑动时出现相应的删除按钮，本来想着直接使用zepto的touch.js插件，因为之前实现相同的功能时用过这个插件，当时还挺好用的，直接使用它的swipeLeft和swipeRight方法即可，可是今天又开始做这个功能时，却发现这两个方法在使用时毫无效果，一点反应都没有。上网查资料，又下载了最新版本的zepto和touch.js，都没有用...
仿QQ左滑删除【基于RecyclerView】
a568283992的博客
12-09 2093
这是我github开源项目，目前测试阶段，欢迎大家使用提意见！   https://github.com/SineyCoder/LeftSlideView   使用步骤   添加仓库 allprojects { repositories { ... maven { url 'https://jitpack.io' } } }  添加依赖包 depend...
Unity3d 滑动事件--向上、向下、向左、向右（PC好用但是手机滑动不是很理想）
于子潇的博客
06-27 7880
方法写在OnGUI里!!! 脚本挂在空节点就可以了! // touchSecond.y > touchFirst.y && touchSecond.x ==touchFirst.x 多加了一个判断是因为滑动过程中总会误判 private Vector2 touchFirst = Vector2.zero; //手指开始按下的位置 private Vector2 touchSe
仿QQ微信向左滑动点击删除条目的经典案例
today_work的博客
01-05 2592
本篇文章主要介绍如何侧滑删除条目的案例： 首先我们需要做一个自定义的recyclerView 1，用到的东西有，onTouch事件，触屏事件跟踪VelocityTracker，滑动view.scrollTo和scrollBy，Scroller的使用。 整个过程主要是对MotionEvent的三种状态： 1，down 判定当前条目状态，如果完全打开则立即关闭返回，如果关闭状态，则根据get
Android自学 --实现左滑出现删除按钮
Furrain的博客
10-06 1245
Android自学 --实现左滑出现删除按钮 主要是通过HorizontalScrollView，可以重写，也可以不重写，因为比较简单，通过OnTouchEvent判断是否出现按钮。然后搞一个Adapter，adapter的itemlayout使用HorizontalScrollView，全屏只显示别的部分，滑动出现右边的部分。 比较简单，看代码就好了。 主要有一个问题，当时有用Horizonta...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值