🍓 JRoll、React滑动删除 🍓
import React, { Component } from 'react';
import '../src/css/reset.css';
import '../src/css/delete.css';
import JRoll from 'jroll';
class Mall extends Component {
constructor(){
super();
this.state = {
arr: [
{id: '01',name:'lily1'},
{id: '02',name:'lily2'},
{id: '03',name:'lily3'},
{id: '04',name:'lily4'},
{id: '05',name:'lily5'},
{id: '06',name:'lily6'},
{id: '07',name:'lily7'},
{id: '08',name:'lily8'},
{id: '09',name:'lily9'},
{id: '10',name:'lily10'},
{id: '11',name:'lily11'},
{id: '12',name:'lily12'},
{id: '13',name:'lily13'},
{id: '14',name:'lily14'},
{id: '15',name:'lily15'},
{id: '16',name:'lily16'},
{id: '17',name:'lily17'},
{id: '18',name:'lily18'},
{id: '19',name:'lily19'},
{id: '20',name:'lily20'}
]
};
this.deleteOne = this.deleteOne.bind(this);
this.createJroll = this.createJroll.bind(this);
}
createJroll(){
var w = Math.floor(document.getElementsByClassName('del')[0].offsetWidth / 2);
console.log(w);//‘删除’按钮的一半宽度。
// 创建外层jroll实例
var jroll = new JRoll("#wrapper", {
scrollBarY:true
});
var items = document.querySelectorAll(".item");
var current = null; //保存当前滑开的item
for (var i=0,l=items.length; i<l; i++) {
// 每行创建jroll实例
var j = new JRoll(items[i], {
scrollX:true,
bounce:false
});
j.on("scrollStart", function() {
if (current && current !== this) {
current.scrollTo(0, 0, 100);
current = null;
}
});
j.on("scroll", function(e) {
if (this.x === 0 && !current) {
this.call(jroll, e);
} else {
current = this;
}
});
j.on("scrollEnd", function() {
if (this.x > -w) {
this.scrollTo(0, 0, 100);
current = null;
} else {
this.scrollTo(this.maxScrollX, 0, 100);
}
})
}
//添加点击删除按钮的事件
// for (let i=0; i<items.length; i++) {
// let item = items[i];
// let index = i;
// item.onclick = (e)=>{
// // console.log(item);
// if (e.target.className === "del") {
// console.log(item);
// console.log(index);
// item.style.display = 'none';
// }
// };
// }
}
deleteOne(id){
let arr = [];
let items = document.querySelectorAll(".item");
for(let i = 0; i < this.state.arr.length; i ++){
if(this.state.arr[i].id !== id){
arr.push(this.state.arr[i]);
}else{
items[i].style.display = 'none';
}
}
//发起请求
this.setState({arr},()=>{
console.log(this.state.arr);
});
}
componentDidMount() {
this.createJroll();
}
render(){
return <div id="wrapper">
<div className="scroller">
<div id="valid">
{
this.state.arr.map((item,index)=>{
return <div key={index} className="item">
<div className="item-scroller">
<div className="content">列表内容</div>
<div className="del" onClick={()=>this.deleteOne(item.id)}>删除</div>
</div>
</div>
})
}
</div>
<div className="invalid_tit">失效商品</div>
<div id="invalid">
{
this.state.arr.map((item,index)=>{
return <div key={index} className="item">
<div className="item-scroller">
<div className="content">列表内容2</div>
<div className="del">删除2</div>
</div>
</div>
})
}
</div>
</div>
</div>
}
}
class Item extends Component {
}
class App extends Component {
render(){
return <Mall />;
}
}
export default App;
效果图
升级版，防淘宝购物车列表删除，商品列表以店铺为单位展示（而非独立展示）
PS：这里着重展示思路，沿用之前的数据（结构）导致不能够实现删除效果，请无视。重点是‘滑动’的思路。
import React, { Component } from 'react';
import '../src/css/reset.css';
import '../src/css/delete.css';
import JRoll from 'jroll';
class Mall extends Component {
constructor(){
super();
this.state = {
arr: [
{id: '01',name:'lily1'},
{id: '02',name:'lily2'},
{id: '03',name:'lily3'},
{id: '04',name:'lily4'},
{id: '05',name:'lily5'},
{id: '06',name:'lily6'},
{id: '07',name:'lily7'},
{id: '08',name:'lily8'},
{id: '09',name:'lily9'},
{id: '10',name:'lily10'},
{id: '11',name:'lily11'},
{id: '12',name:'lily12'},
{id: '13',name:'lily13'},
{id: '14',name:'lily14'},
{id: '15',name:'lily15'},
{id: '16',name:'lily16'},
{id: '17',name:'lily17'},
{id: '18',name:'lily18'},
{id: '19',name:'lily19'},
{id: '20',name:'lily20'}
]
};
this.deleteOne = this.deleteOne.bind(this);
this.createJroll = this.createJroll.bind(this);
}
createJroll(){
var w = Math.floor(document.getElementsByClassName('del')[0].offsetWidth / 2);
console.log(w);//‘删除’按钮的一半宽度。
// 创建外层jroll实例
var jroll = new JRoll("#wrapper", {
scrollBarY:true
});
var items = document.querySelectorAll(".item");
var current = null; //保存当前滑开的item
for (var i=0,l=items.length; i<l; i++) {
// 每行创建jroll实例
var j = new JRoll(items[i], {
scrollX:true,
bounce:false
});
j.on("scrollStart", function() {
if (current && current !== this) {
current.scrollTo(0, 0, 100);
current = null;
}
});
j.on("scroll", function(e) {
if (this.x === 0 && !current) {
this.call(jroll, e);
} else {
current = this;
}
});
j.on("scrollEnd", function() {
if (this.x > -w) {
this.scrollTo(0, 0, 100);
current = null;
} else {
this.scrollTo(this.maxScrollX, 0, 100);
}
})
}
//添加点击删除按钮的事件
// for (let i=0; i<items.length; i++) {
// let item = items[i];
// let index = i;
// item.onclick = (e)=>{
// // console.log(item);
// if (e.target.className === "del") {
// console.log(item);
// console.log(index);
// item.style.display = 'none';
// }
// };
// }
}
deleteOne(id){
let arr = [];
let items = document.querySelectorAll(".item");
for(let i = 0; i < this.state.arr.length; i ++){
if(this.state.arr[i].id !== id){
arr.push(this.state.arr[i]);
}else{
items[i].style.display = 'none';
}
}
//发起请求
this.setState({arr},()=>{
console.log(this.state.arr);
});
}
componentDidMount() {
this.createJroll();
}
render(){
return <div id="wrapper">
<div className="scroller">
<div id="valid">
{
//以单个商品为单位
// this.state.arr.map((item,index)=>{
// return <div key={index} className="item">
// <div className="item-scroller" style={{minHeight: '0.3rem'}}>
// <div className="content">列表内容</div>
// <div className="del" onClick={()=>this.deleteOne(item.id)}>删除</div>
// </div>
// </div>
// })
//以店铺为单位1
this.state.arr.map((item,index)=>{
return <div key={index}>
<h3>店铺名称{index}</h3>
{
[1,2,3].map((i,n)=>
<div key={n} className="item">
<div className="item-scroller" style={{minHeight: '0.3rem'}}>
<div className="content">列表内容</div>
<div className="del" onClick={()=>this.deleteOne(item.id)}>删除</div>
</div>
</div>
)
}
</div>;
})
}
</div>
<div className="invalid_tit">失效商品</div>
<div id="invalid">
{
this.state.arr.map((item,index)=>{
return <div key={index} className="item">
<div className="item-scroller">
<div className="content">列表内容2</div>
<div className="del">删除2</div>
</div>
</div>
})
}
</div>
</div>
</div>
}
}
class Item extends Component {
}
class App extends Component {
render(){
return <Mall />;
}
}
export default App;
效果图⬇️
🍓 JRoll、React滑动删除 🍓的更多相关文章
- Android开发学习之路-RecyclerView滑动删除和拖动排序
Android开发学习之路-RecyclerView使用初探 Android开发学习之路-RecyclerView的Item自定义动画及DefaultItemAnimator源码分析 Android开 ...
- 写一个js向左滑动删除 交互特效的插件——Html5 touchmove
需求描述 需要实现类似QQ中对联系人的操作:向左滑动,滑出删除按钮.滑动超过一半时松开则自动滑到底,不到一半时松开则返回原处. 纯js实现 使用了h5的touchmove等事件,以及用js动态改变cs ...
- iOS UITableViewCell滑动删除
一般我们使用列表的形式展现数据就会用到UITableView.在熟练掌握了用UITableView展示数据以后,开发过程中可能会遇到需要删除数据的需求,我们想实现在一行数据上划动一下,然后出现一个删除 ...
- Android 用HorizontalScrollView实现ListView的Item滑动删除 ，滑动错乱 冲突
用HorizontalScrollView实现类似微信的滑动删除 测试于:Android2.2+ 对于Android来说按键操作已经在减少,越来越多的手势操作层出不穷,今天介绍一款LIstView的I ...
- android QQ消息左滑动删除实例（优化版SwipeListViewEX）
仿 QQ消息左滑动删除item消息实例 源代码参考:http://blog.csdn.net/gaolei1201/article/details/42677951 自己作了一些调整,全部代码下载地址 ...
- ListView + PopupWindow实现滑动删除
原文:ListView滑动删除 ,仿腾讯QQ(鸿洋_) 文章实现的功能是:在ListView的Item上从右向左滑时,出现删除按钮,点击删除按钮把Item删除. 看过文章后,感觉没有必要把dispat ...
- ios8 tableView设置滑动删除时 显示多个按钮
** * tableView:editActionsForRowAtIndexPath: //设置滑动删除时显示多个按钮 * UITableViewRowAction ...
- IOS第13天(3,私人通讯录，登陆状态数据存储，数据缓存， cell的滑动删除，进入编辑模式，单个位置刷新 )
*****联系人的界面的优化 HMContactsTableViewController.m #import "HMContactsTableViewController.h" # ...
- IOS第七天(6:UiTableView编辑模式, 拖动位置 ,滑动删除)
**********UiTableView编辑模式, 拖动位置 ,滑动删除 #import "HMViewController.h" @interface HMViewContro ...
随机推荐
- python之设计模式
一.简介 设计模式的定义:为了解决面向对象系统中重要和重复的设计封装在一起的一种代码实现框架,可以使得代码更加易于扩展和调用 四个基本要素:模式名称,问题,解决方案,效果 六大原则: 1.开闭原则:一 ...
- linux系统调用之用户管理
getuid 获取用户标识号 setuid 设置用户标志号 getgid 获取组标识号 setgid 设置组标志号 getegid 获取有效组标识号 setegid 设置有效组标识号 geteuid ...
- Overloaded Fuction 调用——到底使用的是谁的函数
#include <stdio.h> class Base{ public: int a(){ ; } }; class Inherit:public Base{ public: int ...
- poj 2559(栈的应用)
传送门 参考资料: [1]:挑战程序设计竞赛 题意: 柱状图是由一些宽度相等的长方形下端对齐后横向排列得到的图形.现在有由n个宽度为1,高度分别为h[1,2,3.......n]的长方形从左到右依次排 ...
- AOP和IOC
AOP切面编程,作用:事务,日志,统一调用,统一实现,拦截,分发: 切点:告诉编译器切面作用于哪个package中的class IOC:控制反转,相对于new 对象来说的,依赖注入:AuthorWar ...
- 剑指Offer_编程题_10
题目描述 我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形.请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法? class Solution { public: int r ...
- Memcached入门学习
Memcached入门学习 学习网址:http://www.runoob.com/Memcached/Memcached-tutorial.html
- Docker记录-Docker部署记录
1.Docker介绍 Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后 ...
- js实现table用鼠标改变td的宽度，固定table宽度和高度超过显示点
<!DOCTYPE HTML> <html> <head> <meta charset="gbk"> <title>ta ...
- Chrome DevTools: Export your raw Code Coverage Data
The Code Coverage tool visually shows you which lines of code in your CSS and JavaScript are used an ...