更新记录

2.0.1(2021-06-03) 下载此版本

修复bug,新增功能

2.0.0(2021-04-11) 下载此版本

完善下拉选择功能,添加选中状态,修复bug

1.0.0(2021-04-05) 下载此版本

发布组件

查看更多

平台兼容性

dropdown-screen 使用说明

  1. 基本用法

    <template>
    <view>
        <dropdown-screen ></dropdown-screen>
    </view>
    </template>
    <script>
    import dropdownScreen from '@/components/dropdown-screen/dropdown-screen'
    export default {
        data() {
            return {
    
            }
        },
        components: {
            dropdownScreen
        },
        methods: {
    
        }
    }
    </script>
    <style>
    </style>

使用说明

平台差异说明
H5 微信小程序 其他
未知
OBJECT 参数说明:
参数名 类型 必填 说明 默认值 可选值
height Number false 筛选条高度 (rpx) 88
itemHeight Number false 下拉单项高度 (rpx) 70
activeColor String false 当前文字活跃颜色 #0377fc
bgcolor String false 背景颜色 #fff
listArr Array true 标题数组 用于展示的示例数据 详解见tips
itemArr Array true 下拉选项数组(二维数组) 用于展示的示例数据 详解见tips
maxItemCount Number false 下拉选项数量超过多少开始滚动 5
itemPadding Number false 下拉选项左偏移距离 24
maskTouch Boolean false 能否遮罩关闭 true true/false
isNeedChangeTitle Boolean true 是否需要选择后替换标题 true true/false
barFontSize Number false 筛选条文字字号 28
barTextColor String false 筛选条文字颜色 #666
itemFontSize Number false 下拉选项文字字号 28
itemTextColor String false 下拉文字颜色 #666
showTag String false 需要展示的字段 text
isTouchPrevent Boolean false 是否要滑动关闭 true true/false
customIndexArr Array false 自定义事件的索引数组 [] 详解见tips
@customClick EventHandle false 自定义点击的触发事件 详解见tips
@finish EventHandle false 获取结果的事件 详解见tips

tips

  1. listArr 标题数组

    listArr要求是必传,是展示在筛选条上的每项的标题,但为了展示使用,目前组件内有listArr的默认值

    示例:

    ['冰度', '甜度', '加料', '配送距离']

  2. itemArr

    itemArr要求是必传,是点击标题展开后的选项列表,但为了展示使用,目前组件内有itemArr的默认值

    示例:

    [
        [{
            text: '加冰',
            value: 1
        }],
        [{
            text: '三分糖',
            value: 3
        }, {
            text: '五分糖',
            value: 4
        }],
        [{
            text: '珍珠',
            value: 7
        }, {
            text: '椰果',
            value: 8
        }],
        [{
            text: '1KM',
            value: 11
        }]
    ]

    itemArr是二维的数组,一维度的每一项对应着listArr的每一项,二维度则是该标题下展开的选择项

  3. customIndexArr 自定义事件的索引数组 ———— 存在一些情况,并不希望展开选项,而是去做一些自定义的操作 使用者可以通过customIndexArr来指定哪些标题项是需要进行自定义操作的 例如你的listArr是

    ['冰度', '甜度', '加料', '配送距离'] 如果你想要"加料"进行自定义操作,那么你的customIndexArr需要传入"加料"项所在数组的索引,就是 [2]

  4. customClick

    用户点击了自定义的选项时触发的事件

  5. finish

    用户点击了展开的选项后触发的事件,会将选项所属index与选项详情作为参数吐出

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

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