cxc-szcx-uniapp/uni_modules/lime-drag

lime-drag 拖拽排序

• 当前为初版 可能会有BUG
• 基于uniapp vue3
• Q群 1169785031

安装

• 在市场导入插件即可在任意页面使用，无须再import

使用

• 提供简单的使用示例，更多请查看下方的demo

<l-drag :list="list" @change="change">
	<!-- // 每一项的插槽 grid 的 content 您传入的数据 -->
	<template #grid="{active, content}">
		<!-- // grid.active 是否为当前拖拽项目 根据自己需要写样式 -->
		<view class="inner" :class="{active: active}">
			<text class="text" :class="{'text-active': active}">{{grid.content}}</text>
		</view>
	</template>
</l-drag> 

const list = new Array(7).fill(0).map((v,i) => i);
// 拖拽后新的数据
const newList = ref([])
const change = v => newList.value = v

增删

• 不要给list赋值，这样只会重新初始化
• 增加数据 调用暴露的push
• 删除某条数据调用暴露的remove方法，需要传入oindex

<l-drag :list="list" @change="change" ref="dragRef" after remove>
	<!-- 每一项插槽 grid 的 content 是您传入的数据 -->
	<template #grid="{active, index, oldindex, oindex}">
		<!-- active 是否为当前拖拽项目 根据自己需要写样式 -->
		<!-- index 排序后列表下标 -->
		<!-- oldindex 排序后列表旧下标 -->
		<!-- oindex 列表原始下标，输入的数据排位不会因为排序而改变 -->
		<view class="remove" @click="onRemove(oindex)"></view>
		<view class="inner" :class="{active}">
			<text class="text" :class="{'text-active': active}">{{content}}</text>
		</view>
	</template>
	<template #after>
		<view class="grid">
			<view class="inner extra" @click="onAdd">
				增加
			</view>
		</view>
	</template>
</l-drag> 

const dragRef = ref(null)
const list = new Array(7).fill(0).map((v,i) => i);
const onAdd = () => {
	dragRef.value.push(Math.round(Math.random() * 1000))
}
const onRemove = (oindex) => {
	if(dragRef.value && oindex >= 0) {
		// 记得oindex为数组的原始index
		dragRef.value.remove(oindex)
	}
}

插槽

<l-drag :list="list">
	<!-- 每一项的插槽 -->
	<template #grid="{active, index, oldindex, oindex, content}"></template>
	<!-- 当前拖拽项幽灵插槽 设置`ghost`后使用 主要为实现拖拽时 有个影子跟着 -->
	<template #ghots></template>
	
	<!-- 前后方插槽为固定在列表前方和后方，不能拖动 -->
	<!-- 列表前方的插槽 设置`before`后使用 -->
	<template #before></template>
	<!-- 列表后方的插槽 设置`after`后使用 -->
	<template #after></template>
</l-drag> 

查看示例

• 导入后直接使用这个标签查看演示效果

<!-- // 代码位于 uni_modules/lime-drag/compoents/lime-drag -->
<lime-drag />

插件标签

• 默认 l-drag 为 component
• 默认 lime-drag 为 demo

关于vue2的使用方式

• 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
• 关键代码是: 在main.js中 在vue2部分加上这一段即可,官方是把它单独成了一个文件.

// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

• 另外插件也用到了TS，vue2可能会遇过官方的TS版本过低的问题,找到HX目录下的compile-typescript目录

// \HBuilderX\plugins\compile-typescript
yarn add typescript -D
- or - 
npm install typescript -D

• 小程序需要在manifest.json启用slotMultipleInstance

"mp-weixin" : {
    "slotMultipleInstance" : true
}

API

Props

参数	说明	类型	默认值
list	列表数组，不可变化，变化后会重新初始化	array	[]
column	列数	number	2
gridHeight	行高,宫格高度	string	120rpx
damping	阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快	string	-
friction	摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值	number	2
extraRow	额外行数	number	0
ghost	开启幽灵插槽	boolean	false
before	开启列前插槽	boolean	false
after	开启列后插槽	boolean	false
disabled	是否禁用	boolean	false
longpress	是否长按	boolean	false

Events

参数	说明	参数
change	返回新数据	list

Expose

参数	说明	参数
remove	删除， 传入oindex,即数据列表原始的index
push	向后增加，可以是数组或单数据
unshift	向前增加，可以是数组或单数据
move	移动, 传入(oindex, toindex),将数据列表原始的index项移到视图中的目标位置

TODO

将来实现的功能

• splice

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。