SwipeAction滑动删除

author: 闫申申

定义

模拟短信、微信聊天列表滑动删除的组件。

图片展示

代码演示

import SwipeAction from 'pile/dist/components/swipeaction'
const {SwipeAction, Layouts} = pile,
  {
    Layout,
    LayoutHd,
    LayoutHdTitle,
    LayoutHdAside,
    LayoutBd,
    LayoutFt,
    Items,
    Item,
    ItemAside,
    ItemContent,
    ItemTitle,
    ItemDesc,
    ItemHd,
    ItemBd,
    ItemFt,
    ItemLink
  } = Layouts,
  {SwipeItem,SwipeItems} = SwipeAction
const _SwipeAction = React.createClass({
  getInitialState() {
    return {
      shows : [true,true,true],
      displacements : [false,false,false],
      disTouchs :[true,false,true],
      touchDefaults : [false,false,false],
      shows2 : [true],
      displacements2 : [false],
      disTouchs2 :[true],
      touchDefaults2 : [false,false,false],
      num : 3
    }
  },
  singleStateVal(key,index,defaultkey){
    this.state[key][index] = defaultkey
    return this.state[key]
  },
  lotStateVal(len,key){
    let newArr = []
    for (var i = 0; i < len; i++) {
      let newKey = key
      newArr.push(newKey)
    }
    return newArr
  },
  otherStateVal(len,index,key,otherkey){
    let newArr = []
    for (var i = 0; i < len; i++) {
      let newKey = i == index ? key : otherkey
      newArr.push(newKey)
    }
    return newArr
  },
  _confirmdel(o){
    let len = this.state.displacements.length
    this.setState({
      shows : this.singleStateVal("shows",o,false),
      displacements : this.singleStateVal("displacements",o,true),
      touchDefaults : this.lotStateVal(len,false)
    })
  },
  _confirmcancel(o){
    let len = this.state.displacements.length
    this.setState({
      displacements : this.singleStateVal("displacements",o,false),
      touchDefaults : this.lotStateVal(len,false)
    })
  },
  _confirmcancel2(o){
    alert("我是自定义按钮的点击事件")
  },
  _confirmdel2(o){
    this.setState({
      shows2 : this.singleStateVal("shows2",o,false),
      displacements2 : this.singleStateVal("displacements2",o,true)
    })
  },
  _itemsTouchBack(o){
    let len = this.state.displacements.length
    this.setState({
      displacements : this.otherStateVal(len,o.index,o.touchState,false),
      touchDefaults : this.lotStateVal(len,o.touchState)
    })
  },
  _itemsTouchBack2(o){
    let len = this.state.displacements2.length
    this.setState({
      displacements2 : this.otherStateVal(len,o.index,o.touchState,false),
      touchDefaults2 : this.lotStateVal(len,o.touchState)
    })
  },
  changeState(){
    this.setState({
      num :1
    })
  },
  render() {
    let self = this,
      {shows,displacements,disTouchs,shows2,displacements2,disTouchs2,touchDefaults,touchDefaults2} = this.state
    return (
      <div className="libs-intr">
          // 多列滑动操作
          <SwipeItems className="mt-10"
              shows={shows}
              displacements={displacements}
              touchDefaults={touchDefaults}
              itemsTouchBack={self._itemsTouchBack}
              disTouchs={disTouchs}
              buttons={[[
                {
                  type: 'delet',
                  label: '删除',
                  onClick: self._confirmdel.bind(self,0)
                },{
                  type: 'cancel',
                  label: '取消',
                  onClick: self._confirmcancel.bind(self,0)
                }
              ],[],[
                {
                  type: 'delet',
                  label: '删除',
                  onClick: self._confirmdel.bind(self,2)
                }
              ]]}>
            <Item>
              <ItemHd>
                <ItemTitle>我有两个按钮</ItemTitle>
              </ItemHd>
              <ItemBd>
                <ItemContent>
                  <ItemDesc>出发地：西二旗地铁站</ItemDesc>
                  <ItemDesc>目的地：北京首都国际机场T2航站楼</ItemDesc>
                </ItemContent>
              </ItemBd>
            </Item>
            <Item>
              <ItemHd>
                <ItemTitle>我不可以滑动</ItemTitle>
              </ItemHd>
              <ItemBd>
                <ItemContent>
                  <ItemDesc>出发地：西二旗地铁站</ItemDesc>
                  <ItemDesc>目的地：北京首都国际机场T2航站楼</ItemDesc>
                </ItemContent>
              </ItemBd>
            </Item>
            <Item>
              <ItemHd>
                <ItemTitle>我有一个按钮</ItemTitle>
              </ItemHd>
              <ItemBd>
                <ItemContent>
                  <ItemDesc>出发地：西二旗地铁站</ItemDesc>
                  <ItemDesc>目的地：北京首都国际机场T2航站楼</ItemDesc>
                </ItemContent>
              </ItemBd>
            </Item>
          </SwipeItems>
          // 单列滑动操作
          <SwipeItems className="mt-10"
              itemsTouchBack={self._itemsTouchBack2}
              touchDefaults={touchDefaults2}
              shows={shows2}
              displacements={displacements2}
              disTouchs={disTouchs2}
              buttons={[[
                {
                  type: 'delet',
                  label: '删除',
                  onClick: self._confirmdel2.bind(self,0)
                },{
                  label: '自定义按钮',
                  onClick: self._confirmcancel2.bind(self,0)
                }
              ]]}>
            <Item>
              <ItemHd>
                <ItemTitle>单列可自定义按钮</ItemTitle>
              </ItemHd>
              <ItemBd>
                <ItemContent>
                  <ItemDesc>出发地：西二旗地铁站</ItemDesc>
                  <ItemDesc>目的地：北京首都国际机场T2航站楼</ItemDesc>
                </ItemContent>
              </ItemBd>
            </Item>
          </SwipeItems>
      </div>
    )
  }
})

属性

原文: https://didi.github.io/pile.js/docs/2017/08/develop-components-swipeaction.html