更新记录

2.0.0(2021-05-08) 下载此版本

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

1.0.0(2021-01-20) 下载此版本

初次发布


平台兼容性

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

预览图

组件说明

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

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

属性说明

属性名 类型 说明
itemHeight int 列表行的高度
list Array 列表数据
threshold int 滑动触发阈值,默认50
options Array 左滑展示的操作列表
@click EventHandle 点击某一行时触发此事件
@optionClick EventHandle 点击options中的某一个按钮触发,参数包含该按钮对象

使用示例


页面:

<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>

隐私、权限声明

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

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

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

许可协议

MIT协议

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