Picker 选择器

最新推荐文章于 2024-04-13 17:27:03 发布
最新推荐文章于 2024-04-13 17:27:03 发布
阅读量1.9k 收藏 3
点赞数 1
分类专栏： React相关
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/waillyer/article/details/116230381
版权

Picker 选择器

在这里插入图片描述

层级选择

使用Ant Design Mobile

Ant Design Mobile

数据项

const province = [
        {
            label: "北京",
            value: "01",
            children: [
                {
                    label: "东城区",
                    value: "01-1",
                },
                {
                    label: "西城区",
                    value: "01-2",
                },
                {
                    label: "崇文区",
                    value: "01-3",
                },
                {
                    label: "宣武区",
                    value: "01-4",
                },
            ],
        },
        {
            label: "浙江",
            value: "02",
            children: [
                {
                    label: "杭州",
                    value: "02-1",
                    children: [
                        {
                            label: "西湖区",
                            value: "02-1-1",
                        },
                        {
                            label: "上城区",
                            value: "02-1-2",
                        },
                        {
                            label: "江干区",
                            value: "02-1-3",
                        },
                        {
                            label: "下城区",
                            value: "02-1-4",
                        },
                    ],
                },
                {
                    label: "宁波",
                    value: "02-2",
                    children: [
                        {
                            label: "xx区",
                            value: "02-2-1",
                        },
                        {
                            label: "yy区",
                            value: "02-2-2",
                        },
                    ],
                },
                {
                    label: "温州",
                    value: "02-3",
                },
                {
                    label: "嘉兴",
                    value: "02-4",
                },
                {
                    label: "湖州",
                    value: "02-5",
                },
                {
                    label: "绍兴",
                    value: "02-6",
                },
            ],
        },
    ];

api

在这里插入图片描述

实现代码

import React, { useState } from "react";
import { Picker, List } from "antd-mobile";
import "antd-mobile/dist/antd-mobile.css";

export default function Index() {
    const defdata = {
        data: [],
        cols: 1,
        pickerValue: [],
        asyncValue: [],
        gradesValue: [],
        visible: false,
        visible2: false,
        colorValue: ["#00FF00"],
        antdDistrict: [],
    };
    const [value, setValue] = useState(defdata);
    const province = [
        {
            label: "北京",
            value: "01",
            children: [
                {
                    label: "东城区",
                    value: "01-1",
                },
                {
                    label: "西城区",
                    value: "01-2",
                },
                {
                    label: "崇文区",
                    value: "01-3",
                },
                {
                    label: "宣武区",
                    value: "01-4",
                },
            ],
        },
        {
            label: "浙江",
            value: "02",
            children: [
                {
                    label: "杭州",
                    value: "02-1",
                    children: [
                        {
                            label: "西湖区",
                            value: "02-1-1",
                        },
                        {
                            label: "上城区",
                            value: "02-1-2",
                        },
                        {
                            label: "江干区",
                            value: "02-1-3",
                        },
                        {
                            label: "下城区",
                            value: "02-1-4",
                        },
                    ],
                },
                {
                    label: "宁波",
                    value: "02-2",
                    children: [
                        {
                            label: "xx区",
                            value: "02-2-1",
                        },
                        {
                            label: "yy区",
                            value: "02-2-2",
                        },
                    ],
                },
                {
                    label: "温州",
                    value: "02-3",
                },
                {
                    label: "嘉兴",
                    value: "02-4",
                },
                {
                    label: "湖州",
                    value: "02-5",
                },
                {
                    label: "绍兴",
                    value: "02-6",
                },
            ],
        },
    ];

    const onOk = (value) => {
        console.log(value);
        setValue({ gradesValue: value });
    };

    return (
        <div>
            <List style={{ backgroundColor: "white" }} className="picker-list">
                <Picker
                    visible={value.visible2}
                    data={province}
                    title="选择"
                    extra="请选择(可选)"
                    // cascade={false}
                    value={value.gradesValue}
                    onChange={(v) => setValue({ gradesValue: v })}
                    onOk={(v) => onOk(v)}>
                    <List.Item
                        arrow="horizontal"
                        onClick={() => setValue({ visible2: true })}>
                        Multip
                    </List.Item>
                </Picker>
            </List>
        </div>
    );
}

这里，因为项目使用trao开发小程序

避免引入更多依赖，这里使用两列处理

当然了，按需导入组件，也是没啥问题的

在这里插入图片描述

下面是具体代码

<View className="drawer-item selected">
                <View className="drawer-item-key">客户分类</View>
                <View>
                    <Picker
                        mode="multiSelector"
                        range={[grades.col1, grades.col2]}
                        rangeKey="name"
                        onChange={e => chooseMultiSelector(e)}
                        onColumnChange={e => chooseColumnMultiSelector(e)}
                    >
                        <View>{gradeChoose || '全部'}</View>
                    </Picker>
                </View>
            </View>

const chooseMultiSelector = e => {
        const first = grades.col1[e.detail.value[0]];
        const last = grades.col1[e.detail.value[1]];
        const idArry = [first.id, last.id].filter(el => !!el);

        if (idArry.length !== 0) {
            setGradeChoose(`${first.name}/${last.name}`);
            handleFilterParamsChange('classify_id', idArry[idArry.length - 1]);
        } else {
            setGradeChoose(undefined);
            handleFilterParamsChange('classify_id', '');
        }
    };
    const chooseColumnMultiSelector = e => {
        if (e.detail.column === 0) {
            // 判断第1列value值省发生了变化
            const index = e.detail.value;
            if (
                grades.col1[index].sub_client_classifies &&
                grades.col1[index].sub_client_classifies.length > 0
            ) {
                const newData = grades.col1[index].sub_client_classifies.filter(
                    el => el.id !== null,
                );
                newData.unshift({
                    id: null,
                    name: '全部',
                });
                setGrades({
                    ...grades,
                    col2: newData,
                });
            }
        } else if (e.detail.column === 1) {
            // const index = e.detail.value;
            // if (grades.col1[index].child && grades.col1[index].child.length > 0) {
            //     setGrades({
            //         col2: grades.col1[index].sub_client_classifies,
            //     });
            // }
        }
    };

import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { View, Picker } from '@tarojs/components';
import { AtDrawer, AtButton } from 'taro-ui';
import customerServices from '../../services/customerProfileList';
import Taro, { useDidShow } from '@tarojs/taro';

export default function Filter() {
    const dispatch = useDispatch();
    const { drawerShow, filterParams, customergetStructure } = useSelector(
        state => state.customerProfileList,
    );
    const defaultGrades = {
        gradeStart: [],
        gradesOther: [],
        col1: [],
        col2: [],
        col3: [],
    };
    const [grades, setGrades] = useState(defaultGrades);
    const [gradeChoose, setGradeChoose] = useState();

    useDidShow(() => {
        // TODO获取经营组数据
        dispatch({
            type: 'customerProfileList/getCustomergetStructure',
        });

        const defauleGrades = [
            {
                created_at: '2021-04-23 11:50:22',
                deleted_at: null,
                id: 30,
                name: 'A类',
                pid: null,
                sort: 3,
                sub_client_classifies: [
                    {
                        created_at: '2021-04-02 16:20:45',
                        deleted_at: null,
                        id: 19,
                        name: 'A1-1类',
                        pid: 30,
                        sort: 1,
                        updated_at: '2021-04-23 11:50:39',
                        sub_client_classifies: [
                            {
                                created_at: '2021-04-02 16:20:45',
                                deleted_at: null,
                                id: 19,
                                name: 'A1-2类',
                                pid: 30,
                                sort: 1,
                                sub_client_classifies: [],
                                updated_at: '2021-04-23 11:50:39',
                            },
                        ],
                    },
                ],
            },
            {
                created_at: '2021-04-23 11:50:22',
                deleted_at: null,
                id: 31,
                name: 'ABI类',
                pid: null,
                sort: 4,
                sub_client_classifies: [
                    {
                        created_at: '2021-04-02 16:20:45',
                        deleted_at: null,
                        id: 19,
                        name: 'A2类',
                        pid: 30,
                        sort: 1,
                        sub_client_classifies: [],
                        updated_at: '2021-04-23 11:50:39',
                    },
                ],
            },
            {
                created_at: '2021-04-23 11:50:22',
                deleted_at: null,
                id: 31,
                name: '第三项',
                pid: null,
                sort: 4,
                sub_client_classifies: [
                    {
                        created_at: '2021-04-02 16:20:45',
                        deleted_at: null,
                        id: 19,
                        name: 'A3类',
                        pid: 30,
                        sort: 1,
                        sub_client_classifies: [],
                        updated_at: '2021-04-23 11:50:39',
                    },
                    {
                        created_at: '2021-04-02 16:20:45',
                        deleted_at: null,
                        id: 19,
                        name: 'A3-1类',
                        pid: 30,
                        sort: 1,
                        sub_client_classifies: [],
                        updated_at: '2021-04-23 11:50:39',
                    },
                ],
            },
        ];
        if (defauleGrades.length > 0) {
            defauleGrades.unshift({
                id: null,
                name: '全部',
                sub_client_classifies: [
                    {
                        id: null,
                        name: '全部',
                    },
                ],
            });
            if (defauleGrades[0].sub_client_classifies) {
                setGrades({
                    ...grades,
                    col1: defauleGrades,
                    col2: defauleGrades[0].sub_client_classifies,
                });
                return;
            }
            setGrades({
                ...grades,
                col2: defauleGrades[0].sub_client_classifies,
                col1: defauleGrades,
            });
        }
    });
    const handleFilterParamsChange = (key, value) => {
        dispatch({
            type: 'customerProfileList/updateStateProps',
            payload: {
                name: 'filterParams',
                value: {
                    [key]: value,
                },
            },
        });
    };

    const chooseMultiSelector = e => {
        const first = grades.col1[e.detail.value[0]];
        const last = grades.col1[e.detail.value[1]];
        const idArry = [first.id, last.id].filter(el => !!el);

        if (idArry.length !== 0) {
            setGradeChoose(`${first.name}/${last.name}`);
            handleFilterParamsChange('classify_id', idArry[idArry.length - 1]);
        } else {
            setGradeChoose(undefined);
            handleFilterParamsChange('classify_id', '');
        }
    };
    const chooseColumnMultiSelector = e => {
        if (e.detail.column === 0) {
            // 判断第1列value值省发生了变化
            const index = e.detail.value;
            if (
                grades.col1[index].sub_client_classifies &&
                grades.col1[index].sub_client_classifies.length > 0
            ) {
                const newData = grades.col1[index].sub_client_classifies.filter(
                    el => el.id !== null,
                );
                newData.unshift({
                    id: null,
                    name: '全部',
                });
                setGrades({
                    ...grades,
                    col2: newData,
                });
            }
        } else if (e.detail.column === 1) {
            // const index = e.detail.value;
            // if (grades.col1[index].child && grades.col1[index].child.length > 0) {
            //     setGrades({
            //         col2: grades.col1[index].sub_client_classifies,
            //     });
            // }
        }
    };

    const handleDrawerClose = () => {
        dispatch({
            type: 'customerProfileList/overrideStateProps',
            payload: {
                drawerShow: false,
            },
        });
    };

    const submit = () => {
        dispatch({
            type: 'customerProfileList/getCustomerList',
        });
        handleDrawerClose();
    };

    const resetC = () => {
        dispatch({
            type: 'customerProfileList/overrideStateProps',
            payload: {
                filterParams: {},
            },
        });
        dispatch({
            type: 'customerProfileList/getCustomerList',
        });
        handleDrawerClose();
    };
    const chooseCopy = type => {
        Taro.navigateTo({
            url: '../handler/index',
            events: {
                setData(key, data) {
                    const name = `${type}_name`;
                    const id = `${type}_id`;
                    handleFilterParamsChange(name, data.name);
                    handleFilterParamsChange(id, data.id);
                },
            },
        });
    };

    return (
        <AtDrawer className="drawer" show={drawerShow} right mask onClose={handleDrawerClose}>
            <View className="drawer-item selected">
                <View className="drawer-item-key">审批状态</View>
                <View>
                    <Picker
                        mode="selector"
                        range={customerServices.STATUS_MAP}
                        rangeKey="value"
                        onChange={e => {
                            handleFilterParamsChange(
                                'approve_state',
                                customerServices.STATUS_MAP[e.detail.value].key,
                            );
                        }}
                    >
                        <View>{customerServices.STATUS[filterParams.approve_state] || '全部'}</View>
                    </Picker>
                </View>
                <View>{customerServices.STATUS[filterParams.status]}</View>
            </View>
            <View className="drawer-item selected">
                <View className="drawer-item-key">业务阶段</View>
                <View>
                    <Picker
                        mode="selector"
                        range={customerServices.BUSINESSSTAGE_MAP}
                        rangeKey="value"
                        onChange={e => {
                            handleFilterParamsChange(
                                'current_phase_id',
                                customerServices.BUSINESSSTAGE_MAP[e.detail.value].key,
                            );
                        }}
                    >
                        <View>
                            {customerServices.BUSINESSSTAGE[filterParams.current_phase_id] ||
                                '全部'}
                        </View>
                    </Picker>
                </View>
            </View>
            <View className="drawer-item selected">
                <View className="drawer-item-key">经营组</View>
                <View>
                    <Picker
                        mode="selector"
                        range={customergetStructure}
                        rangeKey="name"
                        onChange={e => {
                            handleFilterParamsChange(
                                'operations_group_id',
                                customergetStructure[e.detail.value].id,
                            );
                        }}
                    >
                        <View>
                            {filterParams.operations_group_id
                                ? customergetStructure.find(
                                      el => el.id === filterParams.operations_group_id,
                                  )?.name
                                : '全部'}
                        </View>
                    </Picker>
                </View>
            </View>
            <View className="drawer-item selected">
                <View className="drawer-item-key">客户分类</View>
                <View>
                    <Picker
                        mode="multiSelector"
                        range={[grades.col1, grades.col2]}
                        rangeKey="name"
                        onChange={e => chooseMultiSelector(e)}
                        onColumnChange={e => chooseColumnMultiSelector(e)}
                    >
                        <View>{gradeChoose || '全部'}</View>
                    </Picker>
                </View>
            </View>

            <View className="drawer-item selected">
                <View className="drawer-item-key">负责人</View>
                <View
                    className="drawer-item-value drawer-item-value_in-access"
                    onClick={() => {
                        chooseCopy('principal');
                    }}
                >
                    <View className={filterParams.principal_name ? 'drawer-item-value_active' : ''}>
                        {filterParams.principal_name || '请选择'}
                    </View>
                </View>
            </View>
            <View className="drawer-item selected">
                <View className="drawer-item-key">当前审批人</View>
                <View
                    className="drawer-item-value drawer-item-value_in-access"
                    onClick={() => {
                        chooseCopy('approver');
                    }}
                >
                    <View className={filterParams.approver_name ? 'drawer-item-value_active' : ''}>
                        {filterParams.approver_name || '请选择'}
                    </View>
                </View>
            </View>

            <View className="drawer-btn">
                <AtButton className="drawer-btn-reset" onClick={resetC}>
                    重置
                </AtButton>
                <AtButton className="drawer-btn-submit" type="primary" onClick={submit}>
                    确定
                </AtButton>
            </View>
        </AtDrawer>
    );
}
waillyer
关注
专栏目录
城市选择，城市联动
weixin_45626517的博客
11-26 238
方法一： 前置条件： 1、每个字母下的城市列表使用一个容器包着，容器带有id，方便后续锚点跳转。 2、navigatorBar里的字母高定死，知道navigatorBa总高度，方便知道滑动到哪个字母。 方法： 锚点跳转 监听navigatorBar的滑动距离，计算出所滑动的点是在哪个字母的范围（比如我知道一共有10个字母，一个字母定高10px,我滑动了30px，30px在第三个字母的范围内，所以我就知道了我滑到了第三个字母。）取出这...
【微信小程序】选择器组件picker
Fangyechy的博客
11-01 1万+
微信小程序之选择器组件picker
picker选择器
weixin_43360488的博客
09-11 1034
普通选择器: mode = selector 属性 类型 默认值 说明 Range Array / Object Array 0 mode=selector时，range有效 range-key String 当range是一个Object时，通过range-key来指定Object中key的值作为选择0器显示内容 Value Number 0 value的值表示选择了...
微信小程序把玩（十八）picker组件
热门推荐
FUCK
09-26 8万+
picker选择器分为三种，普通选择器，时间选择器， 日期选择器 用mode属性区分，默认是普通选择器。测试时时间和日期点击无反应不知道是BUG还是啥！没法手机测试现在也不知道咋回事！！主要属性：普通选择器时间选择器日期选择器wxml<view>普通选择器</view> <!--mode默认selector range数据源value选择的index bindchange事件监听--> <picke
Pickers（选择器）
莫高雷草原
04-18 1307
选择器 Android为用户提供了现成的选择时间或日期的对话框控件。每种选择器提供了可选择每一部分时间（时，分，上午/下午）或日期（月，日，年）的控件。使用这些选择器有助于确保用户可以选择有效的、格式正确的且适用于用户所在地区的时间或日期。 我们建议你使用 DialogFragment 来承载每个时间或日期选择器。DialogFragment 可以为你管理对话框的生命周期，并且
微信小程序实现自定义picker选择器弹窗内容
08-27
微信小程序实现自定义Picker选择器弹窗内容 微信小程序实现自定义Picker选择器弹窗内容是指在微信小程序中实现自定义的Picker选择器弹窗内容，满足开发者对选择器弹窗内容的个性化需求。本文将详细介绍微信小程序...
lb-picker选择器示例.rar
02-18
在uni-app框架中，lb-picker选择器是一种常用的交互组件，用于实现用户在多个选项中进行选择的功能。这个组件是基于JavaScript和Vue.js技术构建的，适用于移动应用开发，特别是那些需要用户输入特定信息如日期、时间...
vue学习之mintui picker选择器实现省市二级联动示例
08-29
在本篇关于“vue学习之mintui picker选择器实现省市二级联动示例”的文章中，我们将探讨如何使用Mint UI的Picker组件来创建一个能够展示省市两级联动的选择器。 首先，让我们了解一下Mint UI的Picker组件。Picker是...
浅谈vant组件Picker 选择器选单选问题
01-18
1.写遮罩 2.定义data 3.写事件 4.效果图 补充知识：vue使用vant编辑用户性别 我就废话不多说了，大家还是直接看代码吧~ 性别 value=user.gender click=isEditGenderShow> <!... close-on-c
Picker/选择器, ColorPicker/颜色选择器, DatePicker/日期选择器 的使用
Hanyang Li的专栏
06-21 563
Picker/选择器, ColorPicker/颜色选择器, DatePicker/日期选择器 的使用
小程序picker选择器
hql1024的博客
12-03 164
<view class="row"> <label> 用户类型:</label> <picker class="leixing" bindchange="bindPickerChangetwo" value="{{indextwo}}" range="{{arraytwo}}"> <view class=...
vue 多项选择器 picker组件——动态绑定数组实现多项选择器
最新发布
weixin_45896868的博客
04-13 2286
基于这个演示的效果我们可以很直观的知道各个属性的作用：range是我们选择的范围，range-key是要它显示的内容，value是每次选定的下标（类似[0,0,0]这样），@columnchange是滑动改变选择触发的方法。一开始我认为是同步的问题，就是接口的数据还没来及给multiAdress这个数组，picker就已经显示了，于是使用了promise来解决这个问题，但是没有作用，于是我又想了很久，终于在别人的博客中找到了答案，那就是。省市区的格式是这样的，Code可以不用管，这是我调用接口用的参数。
【微信小程序】进阶篇 -- 表单组件 - picker 实现日期选择器（五十三）
JMFive的博客
04-07 1万+
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第53篇文章;今天开始学习微信小程序的第40天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。
uni——picker普通选择器
努力、拼搏、奋进
12-28 1603
uni——picker普通选择器
【实战经验】vant中picker选择器封装，让你的表单选择更简单
希望看完文章的你能够带着答案离开
06-12 6999
【实战经验】vant中picker选择器封装，让你的表单选择更简单
微信小程序选择器picker的使用（selector 普通选择器）
m0_52244931的博客
03-10 4911
从底部弹起的滚动选择器。就是类似于element-ui中的下拉选择器。
前端Vue自定义简单通用省市区选择器picker地区选择器picker 收获地址界面模版
chenchuang0128的博客
06-29 7375
### 使用方法```使用方法-- 省市区选择 show:是否显示 @sureSelectArea：确认事件 @hideShow：隐藏事件-->main.js文件设置全局函数methods: {[] : {};} else {});} else {});});```#### HTML代码实现部分```html
picker 选择器
07-27
您好！关于选择器（Picker），它是一种用户界面元素，用于从预定义选项列表中选择一个值。它通常用于移动应用程序或网页中的表单或设置页面。 选择器有多种类型，包括下拉选择器（Dropdown Picker）和滚动选择器（Wheel Picker）。下拉选择器显示一个下拉列表，用户可以点击并选择一个选项。滚动选择器则允许用户通过滚动手势来选择值，通常以滚动轮或滚动条的形式呈现。 选择器的选项可以是文本、数字、日期、时间、颜色等等，具体取决于应用程序的需求。选择器的目的是提供一个直观且易于操作的方式，使用户能够从多个选项中快速选择所需的值。 希望这个简单的解释能够回答您的问题！如果您还有其他问题，我会很乐意为您解答。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值