@mas.io/adc-movable-items

安装

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

组件介绍

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

API

参数	描述	类型	必填	默认值
title	顶部文案	string	否	长按拖动排序
btnDesc	操作按钮文案	string	否	确认
showBtn	是否展示操作按钮	boolean	否	true
items	列表数据	Item[]	否	[]
onSubmit	提交	function()	否
onChange	排序变更时回调	function()	否

Item

参数	描述	类型	必填	默认值
key	key	string	否
value	值	string	否
label	文案	string	否

代码演示

<!-- 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;
}