更新记录

2.0.0（2021-05-08） 下载此版本

APP和微信小程序测试正常运行，其他平台没测试。

1.0.0（2021-01-20） 下载此版本

初次发布

平台兼容性

预览图

组件说明

列表子项目的展示样式通过插槽方式自定义。

APP 和 微信小程序测试正常，其他平台没有测试。

属性说明

使用示例

页面：

<template>
    <option-list 
        :itemHeight="itemHeight"
        :list="list"
        :threshold="threshold"
        @click="rowClick"
        @optionClick="optionClick"
        :options="options">
            <template slot-scope="{ item }">
                <view class="item">
                    <image :src="item.img" mode="aspectFill" class="item-img"></image>
                    <text style="margin-left: 20px;">{{item.text}}</text>
                </view>
            </template>
    </option-list>
</template>

<style lang="scss" scoped>
    //scoped 在当前页生效 不影响子组件
    .item{
        // width: 100%;
        padding: 0 20px;
        height: 100%;
        display: flex;
        align-items: center;
        .item-img{
            width: 40px;
            height: 40px;
        }
    }
</style>

script:

<script>
    import optionList from './option-list.vue';
    export default {
        components: {
            optionList
        },
        data() {
            return {
                list: [
                    {
                        id: 1,
                        img: 'https://zos.alipayobjects.com/rmsportal/riaksOILvYdFRfa.png',
                        text: 'Senior Product Designer1',
                    },
                    {
                        id: 2,
                        img: 'https://zos.alipayobjects.com/rmsportal/EMQSSlFQtGYEnWx.png',
                        text: 'Senior Product Designer2',
                    },
                    {
                        id: 3,
                        img: 'https://zos.alipayobjects.com/rmsportal/OCuGZXfRioLyhKF.png',
                        text: 'Senior Product Designer3',
                    },
                    {
                        id: 4,
                        img: 'https://zos.alipayobjects.com/rmsportal/agzYYwzggpOjqge.png',
                        text: 'Senior Product Designer4',
                    },
                ],
                itemHeight: 120, //默认高度120rpx
                options: [//左滑的操作列表
                    {
                        color: '#ffffff',
                        bgColor: '#409EFF',
                        text: '编辑',
                        width: 120,
                    },
                    {
                        color: '#ffffff', //字体颜色，非必须，默认 #ffffff
                        bgColor: '#FF4058', //背景颜色，非必须，默认 #409EFF
                        text: '删除', //展示文字
                        width: 120, //按钮宽度 默认120rpx 适合两个字的宽度 这个宽度按需调整
                    }
                ],
                threshold: 50,
            }
        },
        methods: {
                    listDelete(item,index){
                        console.log('删除');
                        console.log(item);
                        this.list.splice(index,1);
                    },
                    listEdit(item){
                        console.log('编辑');
                        console.log(item);
                    },
                    rowClick(item){
                        console.log('点击某一行');
                        console.log(item)
                    },
                    optionClick(item,oitem){
                        console.log('点击某个操作按钮');
                        console.log(item,oitem)
                        if (oitem.text == '删除'){ //这里直接根据text判断点击了哪个按钮，也可自自己增加唯一标识key，当然也可以自己在组件按需定义对应事件
                            this.listDelete(item);
                        }else if(oitem.text == '编辑'){
                            this.listEdit(item);
                        }
                    },
        },
    }
</script>