tmui-cli 2.0.1 → 2.0.2

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/217/215/351/246/210/347/273/204/344/273/266//346/212/275/345/261/211 xDrawer.md"

@@ -0,0 +1,314 @@
+# 抽屉 xDrawer
+
+## 介绍
+
+提供四个方向的弹出。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-drawer/x-drawer.uvue
+```
+
+## 使用
+
+```ts
+<x-drawer></x-drawer>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| customStyle | `自定义遮罩样式`<br> | `string` | `""` |
+| customWrapStyle | `自定义容器背景层样式`<br> | `string` | `""` |
+| customFooterStyle | `自定底部样式。`<br> | `string` | `""` |
+| title | `标题`<br> | `string` | `""` |
+| showFooter | `显示底部操作栏`<br> | `boolean` | `false` |
+| showTitle | `是否显示标题`<br> | `boolean` | `true` |
+| showClose | `是否显示底部关闭按钮`<br> | `boolean` | `false` |
+| overlayClick | `遮罩是否允许点击被关闭`<br> | `boolean` | `true` |
+| show | `显示可v-model:show双向绑定`<br> | `boolean` | `false` |
+| showCancel | `显示取消按钮`<br> | `boolean` | `true` |
+| cancelText | `取消按钮的文本`<br> | `string` | `""` |
+| confirmText | `确认按钮的文本`<br> | `string` | `""` |
+| duration | `动画时间`<br> | `number` | `300` |
+| watiDuration | `打开dom的延迟量，如果你打开 弹窗在ios正常。`<br>`请不要修改此值。如果遇到打不开，或者 打开 后没动画，关闭不了等可能是sdk bug导致 `<br>`此时需要加大值来避免。具体加多少以你弹窗内的节点复杂度有关，需要你自行压力测试。`<br>`此值仅在ios下生效。`<br> | `number` | `120` |
+| position | `打开方向。`<br> | `positionType` | `"bottom"` |
+| round | `打开方向为上和下时的圆角`<br>`空值时，取全局配置的圆角。`<br>`如果你的位置是左右也想要圆角，那么这个值一定要填写，不会取全局值，主要是左右值不太好看取全局值`<br>`会干扰现有布局体系。因此为了向下兼容默认本身空值时，相当于左右时还是无圆角，但你填了值时就会起效。`<br> | `string` | `""` |
+| size | `左右时为内容宽，`<br>`上下时为内容高`<br>`百分比，数字字符或者带单位,或者为auto(根据内容自动高度或者宽高)`<br>`设置为auto时，内容滚动需要关闭在微信上（:disabledScroll="true"）`<br> | `string` | `"50%"` |
+| maxHeight | `弹层最大的高度值，默认为屏幕的可视高`<br>`提供值时不能为百分比，可以是px,rpx单位数字。如果你不带单位，默认转换为rpx单位。`<br> | `string` | `""` |
+| bgColor | `背景颜色`<br> | `string` | `'white'` |
+| darkBgColor | `暗黑背景颜色，如果不提供默认读取全局的sheet配置`<br> | `string` | `''` |
+| overflayBgColor | `遮罩的背景色`<br> | `string` | `'rgba(0, 0, 0, 0.4)'` |
+| disabledScroll | `是否禁用内部的scroll标签`<br>`禁用后内容不会滚动，如果设定了指定高，内容超出指定高，会被裁切`<br>`但如果没有指定高，内容自动的话，高是自动的。`<br> | `boolean` | `false` |
+| disabled | `是否禁用弹出（它是禁用插槽内的弹出不是禁用你手动打开)`<br> | `boolean` | `false` |
+| contentMargin | `内容区域左右和下的边距。`<br> | `string` | `'16'` |
+| widthCoverCenter | `宽屏时是否让内容剧中显示`<br>`并限制其宽为屏幕宽，只展示中间内容以适应宽屏。`<br>`注意只有top,bottom才会生效。`<br> | `boolean` | `false` |
+| swiperLenClose | `滑动左右或者上下关闭弹出层`<br>`注意如果设置为0就表示关闭该功能。`<br>`默认drawer嵌套了scroll-view，再你滚动到顶或者底时，如果继续滑动的距离大于此值关闭层。`<br>`但如果你是禁用了内部scroll-view，而是采用自己的scorll-view，此时该功能会与你的滚动手势冲突，请自行考虑。`<br>`建议要打开时设置为80-100比较合理`<br> | `number` | `0` |
+| offsetTop | `距离顶部的偏移量,如果你布局顶会遮罩弹层可以考虑使用此值`<br> | `string` | `'0'` |
+| offsetBottom | `距离底部的偏移量,如果你布局底会遮罩弹层可以考虑使用此值`<br> | `string` | `'0'` |
+| zIndex | `弹层的层级`<br> | `number` | `1100` |
+| lazy | `懒加载`<br>`为了解决业务布局节点超多时,你可能需要内容延迟加载以免阻塞动画流畅度.`<br>`如果你启用了lazy,每次打开时,动画执行后才会显示内容.这样动画就流畅,不会因为节点过多造成的卡.`<br>`开启了此属性后ios端前面的watiDuration属性可以不用再设置了.`<br> | `boolean` | `false` |
+| disabledConfirm | `是否禁用确认按钮`<br> | `boolean` | `false` |
+| btnColor | `底部按钮操作的主题色，空取全局`<br> | `string` | `""` |
+| beforeClose | `关闭前异步执行的函数，如果返回false阻止关闭，返回true允许关闭`<br>`必须返回的是Promise异步函数，且类型返回值必须是Promise<boolean>，不然会报错。`<br> | `callbackType` | `() : Promise<boolean> => {     return Promise.resolve(true) }` |
+| closeColor | `关闭图标的颜色`<br> | `string` | `"#e6e6e6"` |
+| closeDarkColor | `关闭图标的暗黑颜色`<br> | `string` | `"#545454"` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| click | `-` | 点击遮罩事件 |
+| close | `-` | 关闭是触发 |
+| open | `-` | 打开时触发 |
+| beforeOpen | `-` | 打开前执行 |
+| beforeClose | `-` | 关闭前执行 |
+| update:show | `-` | 等同v-model:show |
+| cancel | `-` | 取消时触发 |
+| confirm | `-` | 确认时触发 |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| trigger | `标签触发显示遮罩，免于使用变量控制` | show: Boolean<br> |
+| contentTop | `内容顶部的额外插槽，仅为下向上弹出（position=bottom)下才会显示。` | - |
+| bg | `背景插槽，可以布局在内容下方。你可在此布局：背景图，渐变（使用view）等其它自己想实现的个性化的背景设计要求。` | - |
+| title | `标题插槽` | show: Boolean<br> |
+| default | `默认插槽` | - |
+| footer | `底部操作栏` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| open | - | `-` | 打开 * |
+| close | - | `-` | 关闭 * |
+
+
+## 示例文件路径
+
+```json
+/pages/fankui/drawer
+```
+
+## 示例源码
+
+```vue
+<template>
+	<!-- #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">抽屉 Drawer</x-text>
+		<x-text color="#999999">
+			提供四个方向的弹出，如果要居中显示，请使用overlay组件。可以设置高为auto,百分比,最大值
+			可以是插槽触发或者变量控制触发
+		</x-text>
+	</x-sheet>
+
+	<x-sheet class="flex flex-row flex-row-center-between">
+		<x-drawer :beforeClose="beforeClose" @open="openDrawer" style="width:24%" size="80%" position="left"
+			:show-footer="true">
+			<template v-slot:trigger="{show}"><x-button :block="true">左弹出</x-button></template>
+			<x-checkbox label="标签"></x-checkbox>
+			<x-switch-slider height="60">
+				<x-cell min-height="60" :showBottomBorder="false" :card="false" icon="discuss-line" title="可以左滑菜单演示"
+					desc="可以双向绑定,手动管理状态"></x-cell>
+				<template #menu>
+					<view class="flex flex-row flex-row-center-end" style="height: 100%;">
+						<view class="flex flex-row flex-row-center-center"
+							style="width:110px;background:black;height: 100%;">
+							<text class="text-white">分享</text>
+						</view>
+						<view class="flex flex-row flex-row-center-center"
+							style="width:110px;background:red;height: 100%;">
+							<text class="text-white">删除</text>
+						</view>
+					</view>
+				</template>
+			</x-switch-slider>
+			<x-picker :list="list">
+				<x-button :block="true">打开选项</x-button>
+			</x-picker>
+		</x-drawer>
+		<x-drawer style="width:24%" position="right">
+			<template v-slot:trigger="{show}"><x-button :block="true">右弹出</x-button></template>
+		</x-drawer>
+		<x-drawer style="width:24%" :show-title="false" :show-close="true" position="top">
+			<x-text>此弹层有内容开启了事件协商和手势关闭,向上滑一定的距离能关闭弹层。</x-text>
+			<template v-slot:trigger="{show}"><x-button :block="true">顶弹出</x-button></template>
+		</x-drawer>
+		<x-drawer style="width:24%" :show-close="true" position="bottom">
+			<template v-slot:trigger="{show}">
+				<x-button :block="true">底弹出</x-button>
+			</template>
+		</x-drawer>
+	</x-sheet>
+
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b">嵌套</x-text>
+	</x-sheet>
+
+	<x-sheet>
+		<x-button @click="show2 = true" :block="true">显示底部操作栏+嵌套</x-button>
+	</x-sheet>
+	<!-- bgColor="rgba(0,0,0,0)"  -->
+	<x-drawer customWrapStyle="margin:0 16px 16px 16px;width:auto;border-radius:16px;" :lazy="true" v-model:show="show2"
+		overflayBgColor="rgba(0,0,0,0.64)" position="bottom" :show-footer="true" size="64%">
+		<template v-slot:contentTop>
+			<view
+				style="display: flex;flex-direction: row;justify-content: center;margin-bottom: 10px;align-items: center;padding:4px 16px;">
+				<x-text font-size="16" color="white">这里是额外的顶部插槽，可以做广告。</x-text>
+			</view>
+		</template>
+		<!-- 定义自定的背景 -->
+		<!-- <template v-slot:bg>
+				<view style="width:100%;height:100%;background-image: linear-gradient(to bottom,red,blue);"></view>
+			</template> -->
+		<x-form :show-label="false">
+			<x-form-item :show-bottom-border="false">
+				<x-input placeholder="请输入帐号" dark-bg-color=""></x-input>
+			</x-form-item>
+			<x-form-item :show-bottom-border="false">
+				<x-input placeholder="请输入密码" dark-bg-color=""></x-input>
+			</x-form-item>
+			<x-button form-type="form" icon="lock-unlock-fill" :block="true">登入</x-button>
+		</x-form>
+		<x-drawer :show-close="true" position="bottom">
+			<template v-slot:trigger="{show}"><x-button class="mt-32" :block="true">嵌套2</x-button></template>
+
+			<x-drawer :show-close="true" position="bottom" size="34%">
+				<template v-slot:trigger="{show}"><x-button :block="true">嵌套3</x-button></template>
+			</x-drawer>
+		</x-drawer>
+		<text class="text-size-m text-grey mt-10 line-8">塞拉利昂共和国总统
+			比奥：中国在不长的时间内取得了巨大的发展成就，发展不仅需要领导人提出规划，还需要人民的共同努力。习近平主席非常专注，习主席知道应为中国人民带来什么，他不受外界噪音的干扰，明确了发展愿景，赢得了中国人民的拥护，取得了卓越成效。</text>
+
+	</x-drawer>
+
+	<x-sheet>
+		<x-button @click="show = true" :block="true">定义底部插槽</x-button>
+	</x-sheet>
+
+	<x-drawer v-model:show="show" position="bottom" :show-footer="true">
+		<text class="text-size-m text-grey mt-10 line-8">此弹层有内容开启了事件协商和手势关闭。可以向上滚动内容，或者向下拉会关闭弹层</text>
+		<text
+			class="text-size-m text-grey mt-10 line-8">国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发塞拉利昂共和国总统
+			比奥：中国在不长的时间内取得了巨大的发展成就，发展不仅需要领导人提出规划，还需要人民的共同努力。习近平主席非常专注，习主席知道应为中国人民带来什么，他不受外界噪音的干扰，明确了发展愿景，赢得了中国人民的拥护，取得了卓越成效。</text>
+		<text
+			class="text-size-m text-grey mt-10 line-8">国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发塞拉利昂共和国总统
+			比奥：中国在不长的时间内取得了巨大的发展成就，发展不仅需要领导人提出规划，还需要人民的共同努力。习近平主席非常专注，习主席知道应为中国人民带来什么，他不受外界噪音的干扰，明确了发展愿景，赢得了中国人民的拥护，取得了卓越成效。</text>
+		<text
+			class="text-size-m text-grey mt-10 line-8">国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发塞拉利昂共和国总统
+			比奥：中国在不长的时间内取得了巨大的发展成就，发展不仅需要领导人提出规划，还需要人民的共同努力。习近平主席非常专注，习主席知道应为中国人民带来什么，他不受外界噪音的干扰，明确了发展愿景，赢得了中国人民的拥护，取得了卓越成效。</text>
+		<text
+			class="text-size-m text-grey mt-10 line-8">国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发国在不长的时间内取得了巨大的发展成就，发塞拉利昂共和国总统
+			比奥：中国在不长的时间内取得了巨大的发展成就，发展不仅需要领导人提出规划，还需要人民的共同努力。习近平主席非常专注，习主席知道应为中国人民带来什么，他不受外界噪音的干扰，明确了发展愿景，赢得了中国人民的拥护，取得了卓越成效。</text>
+		<template #footer>
+			<x-button @click="show=false" :block="true">定义底部插槽</x-button>
+		</template>
+	</x-drawer>
+
+</template>
+
+<script setup lang="ts">
+	import { ref, onMounted } from 'vue'
+	import { PICKER_ITEM_INFO } from "@/uni_modules/tmx-ui"
+
+	const items = [
+		{
+			title: '江西',
+			id: "9-1",
+			children: [
+				{
+					title: '南昌',
+					id: "132",
+					children: [
+						{ title: '青山湖区', id: "1-2" } as PICKER_ITEM_INFO,
+						{ title: '高新区', id: "1-3", disabled: true } as PICKER_ITEM_INFO,
+						{ title: '红谷滩区', id: "1-4" } as PICKER_ITEM_INFO,
+					] as PICKER_ITEM_INFO[],
+
+				} as PICKER_ITEM_INFO,
+				{
+
+					title: '九江', id: "222",
+					children: [
+						{ title: '2青山湖区', id: "1-32" } as PICKER_ITEM_INFO,
+						{ title: '2高新区', id: "1-33" } as PICKER_ITEM_INFO,
+						{ title: '3红谷滩区', id: "1-34" } as PICKER_ITEM_INFO,
+					] as PICKER_ITEM_INFO[],
+				} as PICKER_ITEM_INFO,
+			] as PICKER_ITEM_INFO[],
+		} as PICKER_ITEM_INFO,
+		{
+			title: '安徽',
+			id: "10-13",
+			children: [
+				{
+					title: '5南昌',
+					id: "3",
+					children: [
+						{ title: '5青山湖区', id: "1-52" } as PICKER_ITEM_INFO,
+						{ title: '5高新区', id: "1-53" } as PICKER_ITEM_INFO,
+						{ title: '5红谷滩区', id: "1-54" } as PICKER_ITEM_INFO,
+					] as PICKER_ITEM_INFO[],
+
+				} as PICKER_ITEM_INFO,
+				{
+					title: '5南昌',
+					id: "36",
+					children: [
+						{ title: '6青山湖区', id: "61-52" } as PICKER_ITEM_INFO,
+						{ title: '6高新区', id: "61-53" } as PICKER_ITEM_INFO,
+						{ title: '6红谷滩区', id: "61-54" } as PICKER_ITEM_INFO,
+					] as PICKER_ITEM_INFO[],
+
+				} as PICKER_ITEM_INFO,
+			] as PICKER_ITEM_INFO[],
+		} as PICKER_ITEM_INFO,
+
+	] as PICKER_ITEM_INFO[];
+
+	const list = ref<PICKER_ITEM_INFO[]>(items)
+	const show = ref(false)
+	const show2 = ref(false)
+
+	const openDrawer = () => {
+		console.log(12)
+	}
+
+	const beforeClose = () : Promise<boolean> => {
+		return new Promise(res => {
+			setTimeout(function () {
+				res(false)
+			}, 2000);
+		})
+	}
+</script>
+
+<style lang="scss">
+
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/217/215/351/246/210/347/273/204/344/273/266//346/213/226/346/213/275/346/216/222/345/272/217 xDrag.md"

@@ -0,0 +1,256 @@
+# 拖拽排序 xDrag
+
+## 介绍
+
+自由布局拖拽排序组件,列或者宫格都支持。使用时,需要将需要拖拽排序的子元素设置为x-drag-item。
+并且子元素和父元素不允许通过style来动态设置宽高,否则拖拽排序会失效。并且list及子元素中的order不允许动态设置,否则拖拽排序会失效。
+想要动态修改数据可以通过vif切换重新渲染下。web支持响应式屏幕。本插件：引用了原生插件x-vibrate-s
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-drag/x-drag.uvue
+```
+
+## 使用
+
+```ts
+<x-drag></x-drag>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| itemHeight | `项目的高度,不要动态更改`<br> | `string` | `'50'` |
+| col | `列数，默认1即列表布局,不要动态更改。1以上为宫格布局`<br> | `number` | `1` |
+| list | `排序数据list，变动后通过change事件取得`<br> | `Array` | `() : UTSJSONObject[] => [] as UTSJSONObject[]` |
+| scrollDiff | `拖动时滚动进步值`<br> | `number` | `25` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| change | `-` | 排序变动时触发 |
+| move | `-` | 拖动时触发,可根据参数进行滚动。向上为负,向下为正 |
+| end | `-` | - |
+| start | `-` | - |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `只可放置子组件x-drag-item` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| addItem | - | `-` | - |
+| delItem | - | `-` | - |
+| updataResize | - | `-` | - |
+
+
+## 示例文件路径
+
+```json
+/pages/fankui/drag
+```
+
+## 示例源码
+
+```vue
+<template>
+	
+		<!-- #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 font-size="12">长按排序</x-text>
+					</view>
+				</x-drag-item>
+			</x-drag>
+		</x-sheet>
+
+</template>
+
+<script setup lang="ts">
+	import { xConfig } from "@/uni_modules/tmx-ui"
+	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>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)