更新记录

1.0（2023-03-13）

支持小程序的流畅拖拽列表，可左滑显示操作菜单

平台兼容性

hyh-dragable-list

• 一、使用示例

<template>
    <view class="test-container">
        <hyh-dragable-list :list="lifeList" :clickClose="true" @change="changeHanlder">
            <template v-slot:default="{ item }">
                <view class="item">{{ item.title }}</view>
            </template>
            <template v-slot:btn="{ btnItem }">
                <view class="btn-area">
                    <view class="btn btn1" @click="btnHandler(btnItem)">按钮1</view>
                    <view class="btn btn2" @click="deleteHandler(btnItem)">按钮2</view>
                </view>
            </template>
        </hyh-dragable-list>
    </view>
</template>

<script setup>
import { ref } from 'vue';
const lifeList = ref([]);
lifeList.value = [
    {
        id: 1,
        title: '长按上下拖拽'
    },
    {
        id: 2,
        title: '左滑显示菜单'
    },
    {
        id: 3,
        title: '登临送目，正故国晚秋'
    },
    {
        id: 4,
        title: '登临送目'
    },
    {
        id: 5,
        title: '正故国晚秋'
    },
    {
        id: 6,
        title: '晚秋'
    },
    {
        id: 7,
        title: '秋'
    },
    {
        id: 8,
        title: '纪念日'
    }
];
function btnClickHandler(item){
    console.log(item)
}

const sortedList=ref([])
sortedList.value=lifeList.value
watch(()=>sortedList.value,()=>{
    // TODO:存储或者提交排序后的list
    console.log(sortedList.value);
})
// 把排序后的list保存到新的变量sortedList中，如果此时直接更改lifeList会出错
function changeHanlder(list){
    // console.log(list);
    sortedList.value=list
}
// 根据插槽回传的item信息删除对应项，要及时更新到sortedList
function deleteHandler(item){
    lifeList.value=sortedList.value.filter((lifeItem)=>{
        return lifeItem.id!==item.id
    })
    sortedList.value=lifeList.value
}
</script>

<style lang="scss" scoped>
.test-container {
    .item {
        width: 100%;
        height: 150rpx;
        line-height: 150rpx;
        text-align: center;
        background-color: beige;
        border-bottom: 1rpx solid gray;
    }
    .btn-area {
        display: flex;
        width: 200rpx;
        height: 150rpx;
        line-height: 150rpx;
        .btn {
            flex-grow: 1;
            text-align: center;
        }
        .btn1 {
            background-color: pink;
        }
        .btn2 {
            background-color: plum;
        }
    }
}
</style>

二、属性介绍

三、使用说明

使用方法如上例，传入list数组，在命名插槽default中可以接收到list的数据项item，在命名插槽btn中也可以接收到list的数据项btnItem，btn插槽可选。默认插槽是default。@change拿到拖拽排序后的数据不要立即赋值list，应该用另一个变量存储。正常情况下是全平台支持的，但只测试过h5和微信小程序。有问题可以反馈，看到会解决，感谢支持。

<hyh-dragable-list :list="list" @change="changeHandler">