qizf7 / mp-swipe-card

wechat mini program swipe card component（微信小程序卡片滑动组件）

小程序卡片滑动组件

小程序的滑动片组件，类似探探的，支持无限滑动，可动态向卡片组中push新内容。

用法

git clone https://github.com/qizf7/mp-swipe-card.git

引入mp-swipe-card组件，mp-swipe-card组件依赖mp-swipe-card-item组件，定制卡片内容可以在此组件中编写，详见index页面。

由于无法使用scoped slot，目前使用一个单独的组件来定义卡片中的内容。在此项目中为mp-swipe-card-item组件,可修改为其他组件。

效果演示

属性

push-list(Array)

推入组件的数组。每次变化都会将新的数组推入组件中，抽象组件内（mp-swipe-card-item）可以接收推入的数组项，自定义卡片内容。

push-update(Object)

用来更新list内的数据。对象格式如下

{
  index: 0, // 要更新的item索引
  data: {
    name: '小小宝'  // 要更新的item数据，更新使用Object.assign将data合并到原数据。
  }
}

disabled(Boolean)

是否禁止滑动

事件

swipeout

卡片滑出时触发

// eventDetail
{
  direction: 'right',   // 方向，left左，right右
  item, // 被滑走的条目
  list, // 完整的数组
}

swipereset

滑动卡片重置位置时触发

// eventDetail
{
  item, // 被滑走的条目
  list, // 完整的数组
}

todo list

• 优化动画效果，新增多方向滑动