更新记录
1.0.2(2024-12-03) 下载此版本
优化性能
1.0.1(2024-12-03) 下载此版本
1.0.1(2024-12-03)
1.0.0(2024-12-03) 下载此版本
首次发布
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
× | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.1.0 app-vue | × | √ | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | × | × | × | × | × |
drag-scroll-view
拖拽排序列表组件,支持边缘自动滚动,无需设置子组件高度
快速上手
<template>
<drag-scroll-view
:list="list"
height="600rpx"
@change="handleChange"
>
<template #default="{item, index}">
<view class="item">
<view>{{item.name}}</view>
<!--必须设置拖拽手柄,否则无法拖动-->
<drag-handle :index="index">拖拽手柄</drag-handle>
</view>
</template>
</drag-scroll-view>
</template>
<script lang="ts" setup>
const list = ref([
{name: 'A'},
{name: 'B'},
{name: 'C'},
{name: 'D'},
{name: 'E'},
{name: 'F'},
{name: 'G'},
]);
const handleChange = (e: {oldIndex: number, newIndex: number})=>{
console.log(`原index: ${e.oldIndex}, 新index: ${e.newIndex}`);
// TODO 手动改变list或向后台发送数据
}
</script>
Props 参数
- list:
any[]
数组数据 - height:
string
高度(必须设置),支持 px/rpx/% - scrollThreshold:
number
(可选,默认40) 触发边缘滚动阈值 px - scrollMinSpeed:
number
(可选,默认20) 最小滚动速度 (px/s)。距边缘越远,速度越接近该值 - scrollMaxSpeed:
number
(可选,默认150) 最大滚动速度 (px/s)。距边缘越近,速度越接近该值 - lineHeight:
number
(可选,默认3) 标记线的高度 px - lineColor:
string
(可选,默认'#444cf7') 标记线颜色
Events 事件
change(event) 排序改变事件
event 参数:
- oldIndex:
number
原下标 - newIndex:
number
新下标
Slots 插槽
default 列表项
注意:不能给插槽样式设置margin,这会导致组件高度计算不正确。如果想给子组件设置间隙,可以在外层设置padding
作用域:
- item:
any
list项数据 - index:
number
list项下标
ghost 幽灵节点
通过此插槽,可自定义幽灵节点
完整演示
<template>
<view class="container">
<view style="padding: 20rpx">drag-scroll-view</view>
<drag-scroll-view
:list="list"
height="600rpx"
@change="handleChange"
>
<template #default="{item, index}">
<view class="item">
<view>{{item.name}}</view>
<!--必须设置拖拽手柄,否则无法拖动-->
<drag-handle :index="index">拖拽手柄</drag-handle>
</view>
</template>
<template #ghost="{item, index}">
<view class="item ghost">
<view>{{item.name}}</view>
<!-- 这里的手柄仅用于显示,可以不使用 -->
<drag-handle :index="index">拖拽手柄</drag-handle>
</view>
</template>
</drag-scroll-view>
</view>
</template>
<script lang="ts" setup>
const list = [
{ name: 'A', },
{ name: 'B', },
{ name: 'C', },
{ name: 'D', },
{ name: 'E', },
{ name: 'F', },
{ name: 'G', },
{ name: 'H', },
{ name: 'I', },
{ name: 'J', },
{ name: 'K', },
{ name: 'L', },
{ name: 'M', },
{ name: 'N', },
{ name: 'U', },
{ name: 'V', },
{ name: 'W', },
{ name: 'X', },
{ name: 'Y', },
{ name: 'Z', },
];
const handleChange = (e: {oldIndex: number, newIndex: number})=>{
console.log(e);
}
</script>
<style lang="scss" scoped>
.container{
height: 1000rpx;
background: #f8f8f8;
.item{
display: flex;
justify-content: space-between;
background-color: #fff;
border-radius: 20rpx;
box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
padding: 20rpx;
margin: 0 6rpx;
&.ghost{
opacity: 0.9;
scale: 0.96;
}
}
}
</style>