TMUI4x(鸿蒙Next)

Appearance

TMUI4x2025-09-25
519
2m

拖拽排序 xDrag ​

在线预览
在线模拟尺寸:

介绍 ​

自由布局拖拽排序组件,列或者宫格都支持。使用时,需要将需要拖拽排序的子元素设置为x-drag-item。 并且子元素和父元素不允许通过style来动态设置宽高,否则拖拽排序会失效。并且list及子元素中的order不允许动态设置,否则拖拽排序会失效。 想要动态修改数据可以通过vif切换重新渲染下。web支持响应式屏幕。本插件：引用了原生插件x-vibrate-s

平台兼容 ​

HarmonyH5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑☑️☑️☑️☑️4.76+1.1.18

文件路径 ​

ts

@/uni_modules/tmx-ui/components/x-drag/x-drag.uvue

使用 ​

ts

<x-drag></x-drag>

Props 属性 ​

名称说明类型默认值
itemHeight项目的高度,不要动态更改。
string"50"
col列数，默认1即列表布局,不要动态更改。
如果是1以上就是宫格布局了。
number1
list你的排序数据list，变动后，请通过change事件来取得
主要是用来骗编译器用的。
UTSJSONObject[]() : UTSJSONObject[] => [] as UTSJSONObject[]
scrollDiff当组件放置在scroll页面中,如果拖动时项目需要滚动时自动滚动的进步值
比如组件在屏幕被底部或者顶部遮挡一部分,当拖动靠近底部时,会向下滚动的值.
这个值是你外部自己通过设置滚动页面的scrollTop来达成的,具体见demo,已经为你写了示例.
number25

Events 事件 ​

名称参数说明
change-排序变动时触发
move-拖动的时候触发,可以根据参数进行对你超出页面屏幕高时进行一个滚动.
end--
start--

Slots 插槽 ​

名称说明数据
default只可放置子组件x-drag-item-

Ref 方法 ​

名称参数返回值说明

示例文件路径 ​

json

/pages/fankui/drag

示例源码 ​

uvue
vue
<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
			<navigation-bar :background-color="xThemeConfigNavBgColor"
				:front-color="xThemeConfigNavFontColor"></navigation-bar>
		</page-meta>
		<!-- #endif -->

		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">拖拽排序 xDrag</x-text>
			<x-text color="#999999">
				使用子组件窗口进行排序，组件内可以自由布局，最大的灵活度不影响你布局自己的外观。
				同时还支持设定col来定制为多列布局为宫格或者为列表模式。
			</x-text>
		</x-sheet>
		<x-sheet>
			<x-drag @change="onchange" v-if="list.length>0" :list="list">
				<x-drag-item style="display: flex;flex-direction: column;" v-for="(item,index) in list" :order="index"
					:disabled="index==1" :key="index">
					<view class="flex-1 mb-2 px-12 flex-row flex flex-row-center-start" :style="{
						backgroundColor: bgColor,
						opacity:index==1?'0.6':'1'
					}">
						<x-text>{{index==1?'我被固定在2':`长按${item.getNumber('id')}排序`}}</x-text>
					</view>
				</x-drag-item>
			</x-drag>
			<x-empty v-if="list.length==0"></x-empty>
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b ">设置为2列形成宫格</x-text>
		</x-sheet>
		<x-sheet>
			<x-drag :col="2" :list="list2">
				<x-drag-item :disabled="index==2" style="display: flex;flex-direction: column;"
					v-for="(item,index) in list2" :order="index" :key="index">
					<view @click="onclick(index)" class="flex-1 mb-2 mx-2 px-12 flex-row flex flex-row-center-start"
						:style="{
						backgroundColor: bgColor,
						opacity:index==2?'0.6':'1'
					}">
						<x-text>长按{{item.getNumber('id')}}排序</x-text>
					</view>
				</x-drag-item>
			</x-drag>
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b ">演示局部拖动,拖动时页面自动滚动</x-text>
		</x-sheet>
		<x-sheet>
			<x-drag :list="list4" @move="onmove" @start="ontouchstart" @end="ontouchend">
				<x-drag-item style="display: flex;flex-direction: column;" v-for="(item,index) in list4" :order="index"
					:key="index">
					<view class="flex-1 mb-2 px-12 flex-row flex flex-row-center-start"
						:style="{backgroundColor: bgColor}">
						<view @longpress.stop="" <!-- #ifdef WEB -->
							@mousedown.stop=""
							@mousemove.stop=""
							<!-- #endif -->
							@click.stop="onclick(index)"
							style="height:100%"
							class="flex-1"
							>
							<x-text>{{index}}</x-text>
						</view>
						<view>
							<x-icon code="EF3E"></x-icon>
						</view>
					</view>
				</x-drag-item>

			</x-drag>
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b ">设置更多的列</x-text>
		</x-sheet>
		<x-sheet>
			<x-drag :col="4" :list="list3">
				<x-drag-item style="display: flex;flex-direction: column;" v-for="(item,index) in list3" :order="index"
					:key="index">
					<view class="flex-1 mb-2 mx-2 px-12 flex-row flex flex-row-center-start"
						:style="{backgroundColor: bgColor}">
						<x-text>长按排序</x-text>
					</view>
				</x-drag-item>
			</x-drag>
		</x-sheet>

	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup lang="ts">
	import { xConfig } from "@/uni_modules/tmx-ui/config/xConfig.uts"
	const list = ref<UTSJSONObject[]>([])
	const list2 = ref<UTSJSONObject[]>([
		{ id: 1 } as UTSJSONObject,
		{ id: 2 } as UTSJSONObject,
		{ id: 3 } as UTSJSONObject,
		{ id: 4 } as UTSJSONObject,
		{ id: 5 } as UTSJSONObject,
		{ id: 6 } as UTSJSONObject
	])
	const list3 = ref<UTSJSONObject[]>([
		{ id: 1 } as UTSJSONObject,
		{ id: 2 } as UTSJSONObject,
		{ id: 3 } as UTSJSONObject,
		{ id: 4 } as UTSJSONObject,
		{ id: 5 } as UTSJSONObject,
		{ id: 6 } as UTSJSONObject,
		{ id: 7 } as UTSJSONObject,
		{ id: 8 } as UTSJSONObject,
		{ id: 9 } as UTSJSONObject
	])
	const list4 = ref<UTSJSONObject[]>([
		{ id: 1 } as UTSJSONObject,
		{ id: 2 } as UTSJSONObject,
		{ id: 3 } as UTSJSONObject,
		{ id: 4 } as UTSJSONObject,
		{ id: 5 } as UTSJSONObject,
		{ id: 6 } as UTSJSONObject
	])
	let tid = 0
	let nowPageScrollY = ref(0)
	let isMoveScroll = ref(false)
	let scrollDiff = ref(25)
	const bgColor = computed(() : string => xConfig.dark == 'dark' ? '#333' : '#e3e8f4')



	onReady(() => {
		tid = setTimeout(function () {
			list.value = [
				{ id: 1 } as UTSJSONObject,
				{ id: 2 } as UTSJSONObject,
				{ id: 3 } as UTSJSONObject,
				{ id: 4 } as UTSJSONObject,
				{ id: 5 } as UTSJSONObject,
				{ id: 6 } as UTSJSONObject
			] as UTSJSONObject[]
		}, 500);
	})
	onUnload(() => {
		clearTimeout(tid)
	})
	onPageScroll((opts) => {
		if (isMoveScroll.value) return;
		nowPageScrollY.value = opts.scrollTop
	})


	function ontouchstart() {

	}
	function ontouchend() {
		isMoveScroll.value = false;

	}
	function onmove(diff : number) {

		isMoveScroll.value = true;
		nowPageScrollY.value += diff;
		uni.pageScrollTo({
			scrollTop: nowPageScrollY.value
		})
	}
	function onclick(index : number) {
		uni.showToast({ title: `点击了:${index}`, icon: 'none' })
	}
	function onchange(list : UTSJSONObject[]) {
		console.warn("变动的数据：", list)
	}
</script>

<style>

</style>
最近更新