更新记录

4.0（2022-07-16） 下载此版本

1.由于上传图片数量不确定性，决定移除rowNum属性，由组件自动计算 2.为了根据设定的图片大小自动适应屏幕宽度，新增属性 colNum，指定每行图片的列数即可自适应屏幕宽度 3.其他优化

3.0（2021-10-19） 下载此版本

1.修复页面滚动后拖拽错乱的问题 2.优化拖拽动画效果，更自然，更流畅

2.0（2021-05-07） 下载此版本

1.优化动画

平台兼容性

属性说明

事件说明

使用方法

配置easycom规则后，自动按需引入，无需import组件，直接引用即可。

<template>
    <xiaokeai-dragImage
        :imgList.sync="imgList"
        @moveEndList="moveEndList"
    />
</template>

示例

    <template>
        <view class="content" >
            <image class="logo" src="/static/logo.png"></image>
            <xiaokeai-dragImage
                :enableDel="enableDel"
                :imgList.sync="imgList"
                @moveEndList="moveEndList"
                @addImg="addImg"
                @delImg="delImg"
            >
                <view class="addImgBtn">添加</view>
            </xiaokeai-dragImage>
            <button type="default" @click="startDel">删除</button>
        </view>
    </template>

    <script>
    export default {
        data() {
            return {
                enableDel: false,  
                imgList: [{ url: '/static/logo.png' }],
            };
        },
        onLoad() {
                this.imgList = [{ url: 'xxx' }];
        },
        methods: {
            moveEndList(e) {
                console.log('移动结束后的新图片列表');
                console.log(e);
            },
            addImg() {
                console.log('添加图片点击事件');
                let _this = this;
                uni.chooseImage({
                    count: 6, //默认9
                    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album'], //从相册选择
                    success: function(res) {
                        for (var i = 0; i < res.tempFilePaths.length; i++) {
                            _this.imgList.push({
                                url: res.tempFilePaths[i]
                            });
                        }
                    }
                });
            },
            delImg(e) {
                console.log('删除图片点击事件');
                console.log(e);
            },
            startDel() {
                this.enableDel = !this.enableDel;
            }
        }
    };
    </script>

    <style>
    .content {
    }
    .addImgBtn {
        width: 100%;
        height: 100%;
        display: flex;
        color: #ffffff;
        justify-content: center;
        align-items: center;
        background-color: #999999;
    }
    </style>