🍓 react,jroll滑动删除 🍓

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: 0; padding: 0}
html,body {height: 100%;width: 100%;}


#wrapper {
    height: 600px;
    width: 100%;
    overflow: hidden;
    border: 1px solid green;
    position: absolute;
    top: 0;
    left: 0;
}
.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;