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: [1,2,3,1,2,3,1,2,3,1,2,3,1,2,3,1,2,3,1,2,3]
};
}
componentDidMount() {
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 (var i=0; i<items.length; i++) {
let item = items[i];
item.onclick = (e)=>{
// console.log(item);
if (e.target.className === "del") {
console.log(item);
item.style.display = 'none';
}
};
}
}
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">删除</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 App extends Component {
render(){
return <Mall />;
}
}
export default App;
CSS
* {margin:; padding:}
html,body {height: 100%;width: 100%;}
#wrapper {
height: 600px;
width: 100%;
overflow: hidden;
border: 1px solid green;
position: absolute;
top:;
left:;
}
.item {
height: 135px;
width: 100%;
margin: 5px auto;
background: #ddd;
position: relative;
}
.item-scroller {
height: 100%;
width: 120%;
position: absolute;
}
.content {
height: 100%;
width: 83.5%;
float: left;
padding-left: 10px;
line-height: 135px;
}
.del {
height: 100%;
width: 16.5%;
background: #f00;
color: #fff;
line-height: 135px;
float: right;
text-align: center;
}
.invalid_tit {
font-size: 20px;
color: #666;
padding: 5px;
}
以下是，有发起请求版本的js部分（有小错误，请无视。重点是删除功能的实现）
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);
}
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() {
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';
// }
// };
// }
}
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 App extends Component {
render(){
return <Mall />;
}
}
export default App;