更新记录

0.0.1（2022-06-09） 下载此版本

1.根据数据渲染一个可以拖拽的列表 拖拽结束会返回拖拽开始的下标 和 结束位置的下标

平台兼容性

演示地址: https://www.bilibili.com/video/BV1e3411G7Ha

演示代码

<template>
    <view style="flex: 1;">
        <view style="height: 150rpx;background-color: coral;">
            <text style="color: #fff;">模拟器其他布局占用高度</text>   
        </view>
        <drag-list :list="list" @dragend="dragend">
            <template v-slot:listItem="{item,index}">
                <view class="row">
                    <image src="@/static/logo.png" style="width: 80rpx;height: 80rpx;"></image>
                    <text class="text" style="margin-left: 20rpx;">我是一条列表信息{{item.title}}</text>
                    <text>---{{item.count}}</text>
                </view>
            </template>

            <template v-slot:dragItem="{item,index}">
                <view class="row">
                    <image src="@/static/logo.png" style="width: 80rpx;height: 80rpx;"></image>
                    <text class="text" style="margin-left: 20rpx;">我是一条列表信息{{item.id}}</text>
                    <text>---{{item.count}}</text>
                </view>
            </template>
        </drag-list>
        <view style="height: 100rpx;background-color: crimson;">
            <text style="color: #fff;">模拟器其他布局占用高度</text>
        </view>
    </view>

</template>

<script>
    import dragList from '@/components/dragList/dragList.nvue'
    export default {
        components: {
            dragList
        },
        data() {
            return {
                list: []
            }
        },
        onLoad() {
            console.log('123');
            for (var i = 0; i < 20; i++) {
                this.list.push({
                    id: i,
                    title: `标题${i}`,
                    count: 0
                })
            }
        },
        methods: {
            reset() {
                this.list = [];
                for (var i = 0; i < 20; i++) {
                    this.list.push({
                        id: i,
                        title: `标题${i}`,
                        count: i
                    })
                }
            },
            dragend({ startIndex,endIndex }) {
                console.log(startIndex);
                console.log(endIndex);

                if (startIndex != endIndex) {
                    this.list[endIndex].count += 1;
                    this.$set(this.list, endIndex, this.list[endIndex]);
                    this.list.splice(startIndex, 1);
                }
            }
        }
    }
</script>

<style>
    .row {
        flex-direction: row;
        align-items: center;
        padding-left: 20rpx;
        padding-right: 20rpx;
        padding-top: 20rpx;
        padding-bottom: 20rpx;
    }
</style>