JS如何实现封装列表右滑动删除收藏按钮

前言

  列表右滑动展示删除和收藏按钮就类似微信或者美团饿了吗的列表,右滑动出现指定的按钮功能;

  本来我是想把前几年支付宝的一个机试题拿来讲,奈何我记不太清题目,也找不到当时做的题了,所以只好将就一下那这个案例来讲解,其实解题思路大致是一样的,毕竟作为程序员最重要的不是会多少框架和会用api用的多熟练,设计思路才是最重要!

案例

  这个界面相信大家都非常熟悉,很多时候一些封装好的插件可以拿来用即可实现这个功能,算是比较大众化,不过为了给不了解原理的小伙伴们讲解,所以自己用dom手写了一个,思路如下:

html部分

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport"
  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <title>支付宝前端机试题</title>
 <link rel="stylesheet" href="css/index.css" rel="external nofollow" >
 <script src="js/index.js"></script>
</head>

<body>
 <h2 class="title">购物车</h2>
 <section class="shoppingList"></section>
</body>

</html>

JS部分

let initXY = [0,0];//记录移动的坐标
let isStop = false;//记录是否禁止滑动
let oldIndex = null;//记录旧的下标
let theIndex = null;//记录新的下标

function touchstart(event,index){
 if(event.touches.length > 1) {
  isStop = true;
  return;
 }
 oldIndex = theIndex;
 theIndex = null;
 initXY = [event.touches[0].pageX,event.touches[0].pageY];
 // console.log(initXY);
}

function touchmove(event,index){
 if(event.touches.length > 1) return;
 let moveX = event.touches[0].pageX - initXY[0];
 let moveY = event.touches[0].pageY - initXY[1];
 if(isStop || Math.abs(moveX) < 5) return;//如果禁止滑动或者滑动的距离小于5就返回
 if(Math.abs(moveY) > Math.abs(moveX)){
  isStop = true;
  return;
 }
 if(moveX<0){
  theIndex = index;
  isStop = true;
 }else if(theIndex && oldIndex === theIndex){
  oldIndex =index;
  theIndex = null;
  isStop = true;
  setTimeout(()=>{oldIndex=null;},150);//设置150毫秒延迟来凸显动画效果,实际不加也可以
 }
 // 这里用jq就不用循环了,但我懒得引,大家知道就好
 let goods = document.getElementsByClassName("goodsInfo");
 for(let i=0;i<goods.length;i++){
  theIndex === i ? goods[i].classList.add("open") : goods[i].classList.remove("open");
 };
 // console.log(moveX,moveY);
}

function touchend(){
 isStop = false;
}

总结

  实现的方法无非就是判断触碰的时候移动的坐标值再加上动画,有兴趣看源代码的小伙伴可以到github下载:

https://github.com/13632756286/Sliding-menu

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2020-07-22

JS中封装axios来管控api的2种方式

前言:我们在开发项目的时候,往往要处理大量的接口.并且在测试环境 开发环境 生产环境使用的接口baseurl都不一样 这时候如果在开发环境完成之后切换每一个接口的baseurl会变的非常的麻烦,(要去每一个发出请求的页面都要去修改地址) 所以为了更好的管控这些api,我们需要自己封装一个axios定义统一的接口baseurl 这样在环境的切换的时候更好的管控和修改.话不多说上代码!!! 自己创建一个api文件夹 即可 import axios from 'axios' 为了处理java字符串问题

PHP的JSON封装、转变及输出操作示例

本文实例讲述了PHP的JSON封装.转变及输出操作.分享给大家供大家参考,具体如下: Json封装 protected function renderJSON($data=[], $msg ="ok", $code = 200) { //设置格式 header('Content-type: application/json'); //输出json格式的内容 print_r(json_encode([ "code" => $code, "msg&quo

Laravel自定义 封装便捷返回Json数据格式的引用方法

一般返回数据格式 return response()->json(['status' => 'success','code' => 200,'message' => '关注成功']); return response()->json(['status' => 'fail','code' => 500,'error' => '关注失败',]); 基类控制器 <?php namespace App\Http\Controllers; use Illumin

nodejs nedb 封装库与使用方法示例

本文实例讲述了nodejs nedb 封装库与使用方法.分享给大家供大家参考,具体如下: libs/nedb.js const Datastore = require('nedb'); function DB(database) { let options = { filename: database, autoload: true, }; this.db = new Datastore(options); } DB.prototype.limit = function(offset, limi

原生js实现文件上传、下载、封装等实例方法

一 .下载 1.代码 const fileDownloadClick = (obj) => { // 解决兼容 if( document.all ){ obj.click(); } else { let event = document.createEvent("MouseEvents"); event.initEvent('click', true, true); obj.dispatchEvent(event); } } const fileDownload = (res,o

nodejs实现的http、https 请求封装操作示例

本文实例讲述了nodejs实现的http.https 请求封装操作.分享给大家供大家参考,具体如下: libs/request.js const URL = require('url'); const zlib = require('zlib'); const http = require('http'); const https = require('https'); const qs = require('querystring'); function Request(cookie) { t

springboot封装JsonUtil,CookieUtil工具类代码实例

这篇文章主要介绍了springboot封装JsonUtil,CookieUtil工具类过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 JsonUtil public class JsonUtil { private static ObjectMapper objectMapper = new ObjectMapper(); public static String objectToString(Object object) throws

layui.use模块外部使用其内部定义的js封装函数方法

用途:常用于监听输入框(其内部不提供监听函数). 用法:需要在 use 中定义 window 函数供外部引用. // 调用成功 <div class="layui-form-item " > <label class="layui-form-label">原密码</label> <div class="layui-input-block"> <input type="text&quo

layui use 定义js外部引用函数的方法

layui.use 加载layui.define 定义的模块,当外部 js 或 onclick调用 use 内部函数时,需要在 use 中定义 window 函数供外部引用 ,如下: layui.use(['layer','form'],function(){ var layer = layui.layer, form = layer.form(); var Test = function(){ //不能被外部引用 console.log("call Test"); } window.

基于Layui自定义模块的使用方法详解

layui是一个极其不错的前端UI框架.是后端程序员的福音.总之如果你是一个后端开发者.如果你苦于你的界面"惨不忍睹".选择layui来开发是个极好的选择. 之前的项目也有使用过layui.只是没有过多的关注其框架本身.对于项目上.拿来即用即可! 为什么要自定义模块呢?好处很多.比如可以大量重用代码...... 我也是一个极其懒惰的人.总是想办法让代码可重用 根据layui官方的文档说明.首先第一步是要确定你要扩展的模块名称 我现在做的是登录功能.因此我的扩展模块名叫 login 使用

在Python中通过threading模块定义和调用线程的方法

定义线程 最简单的方法:使用target指定线程要执行的目标函数,再使用start()启动. 语法: class threading.Thread(group=None, target=None, name=None, args=(), kwargs={}) group恒为None,保留未来使用.target为要执行的函数名.name为线程名,默认为Thread-N,通常使用默认即可.但服务器端程序线程功能不同时,建议命名. #!/usr/bin/env python3 # coding=utf

layui的布局和表格的渲染以及动态生成表格的方法

整体的效果: 一.首先百度搜索layui的地址,然后下载layui的压缩包,,将压缩包的文件解压缩,然后将解压缩后的文件复制到你的编译器上: 二.建立一个html文件,引入layui.css 和 layui.js两个文件,一定要将地址写对,css和js要一起引用: 三.将整个页面分为三部分body标签中要引用的class为class="layui-layout-body" 3.1.头部部分:用一个大的div包裹,class="layui-layout layui-layout

linux shell 自定义函数方法(定义、返回值、变量作用域)

一.定义shell函数(define function) 语法: [ function ] funname [()] { action; [return int;] } 说明: 1.可以带function fun() 定义,也可以直接fun() 定义,不带任何参数. 2.参数返回,可以显示加:return 返回,如果不加,将以最后一条命令运行结果,作为返回值. return后跟数值n(0-255 实例(testfun1.sh): #!/bin/sh fSum 3 2; function fSum

JavaScript函数内部属性和函数方法实例详解

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. 函数是对象,有自己的属性和方法 .首先通过console下输出的函数属性方法来直观的看一下: 函数内部属性只要包括两个特殊的对象:arguments和this. 函数属性包括:length和prototype 函数方法(非继承)包括:apply()和call() 继承而来的函数方法:bind().toString().toLocaleString().valueOf() 其他的目前不熟,后面再补充 1. 函数内部属性 在函数内部,有两

Android开发教程之Fragment定义、创建与使用方法详解【包含Activity通讯,事务执行等】

本文实例讲述了Android开发教程之Fragment定义.创建与使用方法.分享给大家供大家参考,具体如下: 概述 Fragment是activity的界面中的一部分或一种行为.你可以把多个Fragment们组合到一个activity中来创建一个多面界面并且你可以在多个activity中重用一个Fragment.你可以把Fragment认为模块化的一段activity,它具有自己的生命周期,接收它自己的事件,并可以在activity运行时被添加或删除. Fragment不能独立存在,它必须嵌入到

layui 点击重置按钮, select 并没有被重置的解决方法

如下所示: 点击重置时,输入框被重置为空,而账号 select元素并没有被重置. // 重置事件 $("#reset").click(function () { $("#searchContent").val(""); $("#selectKey").val(""); form.render(); }) 调用一下 form.render();即可 为什么表单不显示? 当你使用表单时,Layui会对selec

layui在form表单页面通过Validform加入简单验证的方法

form简单验证 <input type="text" name="email" datatype="e" ignore="ignore" placeholder="请输入邮箱" autocomplete="off" class="layui-input"> datatype="e"验证邮箱 ignore="ignore&qu