单列排序

对应小程序中 效果举例>单列排序，效果类似与抖音频道tab排序

<template>
	<su-drag ref="sudrag"
		v-model="dataList"  
		:columns="1" 
		style="margin-top: 10px;"
		itemMargin="8px"
		custom-after-class="custom-class"
		custom-class="custom-class" 
		@start="start"
		@update="update"
		@end="end"
		>
		<template #default={data}>
			<view style="display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%;">
				<view>{{data.name}}</view>
				<uni-icons type="bars" size="20"></uni-icons>
			</view>
		</template>
		<template #after>
			<view style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;" @click="addItem">
				<view>添加</view>
				<uni-icons type="plusempty" size="17"></uni-icons>
			</view>
		</template>
	</su-drag>
</template>
<script setup>
	import { ref } from 'vue';
	const sudrag = ref(null)
	
	function addItem(){
		sudrag.value?.addItem({id: Date.now(), name: "新增"})
	}
	
	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: "直播" }
	])

	function start(event, index) {
		console.log("start", event, index);
		
	}
	function update(event, index) {
		console.log("update", event, index);
	}
	function end(event, index) {
		console.log("end", event, index);
	}
</script>
<style lang="scss" scoped>
	:deep() {
		.custom-class {
			background-color: #fff;
			height: 45px;
			line-height: 45px;
			padding: 0 15px;
			border-radius: 10px;
			box-sizing: border-box;
			box-shadow: 0px 2px 15px 0px rgba(100, 100, 111, 0.2);
		}
	}
</style>