tui-drag 拖拽排序 会员组件

介绍

拖拽排序，长按进行拖拽操作。

引入

uni-app引入

第一种，手动引入（可全局引入）

import tuiDrag from "@/components/thorui/tui-drag/tui-drag.vue"
export default {
	components:{
		tuiDrag
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看 官网文档 (opens new window)。

uni-app版本平台差异说明

App-Nvue	App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
升级中	✓	✓	✓	✓	✓	✓（暂不支持使用在分包页面中）	✓

微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-drag": "/components/thorui/tui-drag/tui-drag"
  }
}

代码演示

部分功能演示，具体可参考示例程序以及文档API。

设置columns

通过 listData 属性传入数据，columns 属性设置展示列数，默认为3，插槽具体使用介绍请前往 进阶用法。

<template>
 <view class="container">
 	<view class="tui-page__hd">
 		<view class="tui-page__title">设置columns</view>
 		<view class="tui-page__desc">
 			<text>columns：</text>
 			<slider value="3" :min="3" :max="5" :block-size="20" activeColor="#07c160" block-color="#07c160"
 				show-value @change="sliderChange"></slider>
 		</view>
 	</view>
 	<view class="tui-page__bd tui-page__spacing">
 		<tui-drag ref="drag" @change="change" @sortend="sortEnd" :listData="list" :scrollTop="scrollTop"
 			:itemHeight="itemHeight" :columns="columns">
 			<template v-slot:default="{entity,height}">
 				<view class="tui-image__item" :style="{height:height+'rpx'}">
 					<image :src="entity.src" :style="{height:height+'rpx'}" mode="widthFix"></image>
 				</view>
 			</template>
 		</tui-drag>
 	</view>
 </view>
</template>

<script>
 export default {
 	data() {
 		return {
 			itemHeight: 210,
 			scrollTop: 0,
 			list: [],
 			columns: 3
 		};
 	},
 	onLoad() {
 		//如果异步返回数据，可手动调用初始化
 		//this.$refs.drag && this.$refs.drag.init();
 		let list = []
 		for (let i = 0; i < 18; i++) {
 			let img = i % 2 == 0 ? 1 : 2;
 			list.push({
 				id: i + 1,
 				src: `/static/images/layout/${img}.jpg`
 			})
 		}
 		this.list = list;
 	},
 	methods: {
 		sliderChange(e) {
 			uni.pageScrollTo({
 				scrollTop: 0
 			})
 			this.columns = e.detail.value;
 			this.itemHeight = [210, 160, 120][this.columns - 3]
 		},
 		sortEnd(e) {
 			console.log('sortEnd', e.listData);
 		},
 		change(e) {
 			console.log('change', e.listData);
 		}
 	}
 };
</script>

<style>
 .tui-page__desc {
 	width: 100%;
 	display: flex;
 	align-items: center;
 }

 .tui-page__desc slider {
 	flex: 1;
 }

 .tui-image__item {
 	flex: 1;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	background-color: #fff;
 	padding: 20rpx;
 	box-sizing: border-box;
 	border-top: 1rpx solid #eee;
 	border-left: 1rpx solid #eee;
 }

 .tui-image__item image {
 	flex-shrink: 0;
 	width: 100%;
 	display: block;
 	pointer-events: none;
 }
</style>

<!-- 微信小程序使用了抽象节点，generic:item="drag-item"，具体请查看示例内容 -->
<view class="container">
 <view class="tui-page__hd">
 	<view class="tui-page__title">设置columns</view>
 	<view class="tui-page__desc">
 		<text>columns：</text>
 		<slider value="3" min="{{3}}" max="{{5}}" block-size="{{20}}" activeColor="#07c160" block-color="#07c160" show-value bindchange="sliderChange"></slider>
 	</view>
 </view>
 <view class="tui-page__bd tui-page__spacing">
 	<tui-drag  bindchange="change" bindsortend="sortEnd" listData="{{list}}" scrollTop="{{scrollTop}}" itemHeight="{{itemHeight}}"
 	 columns="{{columns}}" generic:item="drag-item">
 	</tui-drag>
 </view>
</view>

Page({
  data: {
    itemHeight: 210,
    scrollTop: 0,
    list: [],
    columns: 3
  },
  onLoad: function (options) {
 	let list = []
 	for (let i = 0; i < 18; i++) {
 		let img = i % 2 == 0 ? 1 : 2;
 		list.push({
 			id: i + 1,
 			src: `/static/images/layout/${img}.jpg`
 		})
      }
      this.setData({
        list:list
      })
  },
  sliderChange(e) {
    wx.pageScrollTo({
      scrollTop: 0
    })
    this.setData({
      columns:e.detail.value,
      itemHeight:[210, 160, 120][e.detail.value - 3]
    })
  },
  sortEnd(e) {
    console.log('sortEnd', e.detail.listData);
  },
  change(e) {
    console.log('change', e.detail.listData);
  }
})

.tui-page__desc {
  width: 100%;
  display: flex;
  align-items: center;
}

.tui-page__desc slider {
  flex: 1;
}

// Make sure to add code blocks to your code group

固定项不可拖动

listData 属性传入数据格式为Array<Object>，其中Object对象的数据内容可自定义。

当需要设置固定项时，需要在Object对象中加入属性fixed，并且值设为true。

Slots

插槽名称	说明
default	拖拽列表内容，微信小程序此处使用的是item 抽象节点 (opens new window)

Props

属性名	类型	说明	默认值
listData	Array<Object>	数据源，Object约定属性 fixed（是否固定，表示此内容不可拖拽，也不可换位置）	[]
columns	Number	列数	3
topSize	Number	顶部固定高度	0
bottomSize	Number	底部固定高度	0
itemHeight	Number	每个item高度, 用于计算drag-wrap 高度,单位rpx	0
scrollTop	Number	页面滚动距离	0
isEdit	Boolean	编辑状态，为true时才可拖拽	true

Events

注：uni-app端绑定事件使用@前缀，如@sortend；微信小程序原生使用bind前缀，如bindsortend

事件名	说明	回调参数
sortend	拖拽结束的时候触发	{listData: 排序后的数据}
change	排序发生改变的时候触发	{listData: 排序后的数据}

预览

请以移动端 (opens new window)效果为准，touch事件目前尚未在PC端做兼容。

特别说明

该组件为 会员组件，非开源内容，需开通会员才可获取使用。

线上程序扫码预览

ThorUI组件库小程序码	H5二维码	ThorUI示例小程序码