drop-down --下拉筛选菜单,多平台测试通过,不支持的平台暂未测试
参数
可选参数属性列表
参数名 | 说明 | 类型 | 是否必填 | 默认值 |
---|---|---|---|---|
filterData | 筛选列表 | Array | 是 | [] |
childName | 子级菜单字段名 | String | 否 | submenu |
fileds | 显示字段 | String | 否 | name |
isChild | 返回结果时是否一并返回子菜单 | Boolean | 否 | false |
autoStow | 选择完成是否自动收起菜单,仅列表模式有效 | Boolean | 否 | true |
resetStow | 重置参数后自动收起菜单 | Boolean | 否 | false |
confirm | 菜单收起时返回赛选结果 | Function | 否 | [] |
filterData 格式和默认值设置
在 filterData 筛选列表中为需要选中的项添加 checked: true 即可,checked 不存或 checked:false 则不选中
const filterData = [{
name: '价格',
type: 'radio',
submenu: [{
name: '200-300',
},{
name: '500-600',
checked: true //默认选中
}]
}]
使用
从uniapp插件市场导入
<template>
<view class="index">
<drop-down :filterData="filterData" @confirm="confirm"></drop-down>
</view>
</template>
<script>
import data from '@/common/data.js'; //筛选菜单数据
export default {
data() {
return {
filterData: [],
};
},
onLoad() {
this.filterData = data;
},
methods: {
confirm(e) {
// 返回值为一个数组
console.log('eeee', e);
},
},
}
</script>
描述
组件内部使用scss进行书写样式,主题色是使用根目录下的uni.scss中的 $uni-color-primary,使用HBuildX创建uniapp项目之后根目录下会自动创建uni.scss文件。
如需修改主题色
第一步:可以使用快捷键 Ctrl+F 输入 $uni-color-primary。
第二步:选择本插件目录名称 drop-dowm 全部替换即可。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。