@mas.io/adc-movable-items v1.0.0

安装

tnpm i @alipay/adc-movable-items -S

组件介绍

可拖动排序列表，支持一键置顶操作

API

Item

代码演示

<!-- index.axml -->
<view class="container">
  <movable-items items="{{items}}" onChange="handleChange" onSubmit="handleSubmit" />
</view>

// index.json
{
  "usingComponents": {
    "movable-items": "@alipay/adc-movable-items/es/movable-items/index"
  }
}

// index.js
interface IData {
  items?: Items[];
}
interface Items {
  key: string;
  label: string;
}

Page({
  data: {
    items: []
  },
  onLoad () {
    /** 创建测试数据 */
    const items = [];
    for (let i = 0; i < 15; i++) {
      const ob = {
        key: i,
        label: `可拖拽列表${i}`
      };
      items.push(ob);
    }
    this.setData({
      items
    });
  },
  handleSubmit (items: Items[]) {
    // 确认
    console.log('handleSubmit::', items);
  },
  handleChange (items: Items[]) {
    // 列表排序改变
    console.log('handleChange::', items);
  }
});

/* index.acss */
.page {
  background-color: #fff;
}

.container {
  height: 100vh;
}