更新记录

0.0.1(2022-06-09)

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


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.4.7 app-nvue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

演示地址: 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>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问