常见问题

本节介绍在开发过程当中遇到的部分 常见问题 以及 解决办法

目前支持哪些平台？

目前仅支持 微信小程序、H5 等平台，别的平台没测过。

排序方式

组件使用给数组元素加sort-field属性的方式实现排序效果，并非直接排序数组。data数组通过v-model传入后，会根据数组下标给元素sort-field属性赋值，如果传入的数组有sort-field属性则沿用原值

例

组件未传入sort-field则默认使用元素sort属性

数据：

const dataList = ref([
	{ id: 1, name: "推荐" },
	{ id: 2, name: "关注" },
	{ id: 3, name: "精选" },
	{ id: 4, name: "同城" },
	{ id: 5, name: "团购" },
	{ id: 6, name: "商城" },
	{ id: 7, name: "热点" },
	{ id: 8, name: "直播" }
])

组件初始化后：

const dataList = ref([
	{ id: 1, name: "推荐" sort: 0},
	{ id: 2, name: "关注" sort: 1},
	{ id: 3, name: "精选" sort: 2},
	{ id: 4, name: "同城" sort: 3},
	{ id: 5, name: "团购" sort: 4},
	{ id: 6, name: "商城" sort: 5},
	{ id: 7, name: "热点" sort: 6},
	{ id: 8, name: "直播" sort: 7}
])

如果初始化时数据中存在sort值，则沿用传入的sort值

新增/删除数据无效

新增数据时请使用addItem方法添加

错误示范：dataList.value.add({id: 9, name: "直播"})

正确方法：sudrag.value.addItem({id: 9, name: "直播"})

删除数据时请使用deleteItem方法传入需删除的元素唯一标识删除

使用方法sudrag.value.deleteItem(9) or sudrag.value.deleteItem([1,2])

注意

deleteItem删除元素，并非物理删除，而是给元素加上了delete属性，删除后的元素值 { id: 8, name: "直播" sort: 7, delete: true}，虽是非物理删除，但删除后不可恢复，禁止通过移除或修改标记的delete尝试恢复数据。

after插槽元素显示位置不对

after插槽元素通常显示在最后一个拖拽元素后，但需要该元素的高度与拖拽元素保持一致。

如果给组件传入了item-height属性则无需关注，如果没有传入，则拖拽元素高度由内容撑开，则需注意，after插槽元素高度与拖拽元素高度保持一致。

更多问题

待收录...