Question

定义

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

图片展示

代码演示

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>
)
  }
})

属性

参数	描述	数据类型	默认值
shows	数据是否展开 子值为true或者false	array
displacements	是否位移(已滑动状态) 子值为true或者false	array
buttons	按钮信息 { type: 'cancel', label: '取消', onClick: self._confirmcancel }	array
disTouchs	是否可以拖动	array
touchDefaults	是否有因素影响拖动	array
itemsTouchBack	滑动后回调函数	function