微信小程序自定义picker多列选择器

需求说明

使用 mpvue 实现自定义的 picker 多列选择器。

1、数据结构说明

根据 picker 的数据特征，需要构造一个如下所示的数据结构。data数组中的三个元素，分别用于渲染 picker 多列选择器的三列数据。能否构造出这个数据结构，直接影响了 picker 多列选择器实现的难易程度。

pid的作用是用于构建出满足 picker 多列选择器的树状数据结构，要特别注意。

const data = [// 用于picker第一列的数据源[{id:1, name:'A'},{id:2, name: 'B'}],// 用于picker第二列的数据源[{id: 11, pid: 1, name: 'A1' },{id: 12, pid: 1, name: 'A2' },{id: 13, pid: 2, name: 'B1' },{id: 14, pid: 2, name: 'B2' },{id: 15, pid: 2, name: 'B3' }],// 用于picker第三列的数据源[{id: 101, pid: 11, name: 'A1-0000000' },{id: 102, pid: 11, name: 'A1-1111111' },{id: 103, pid: 12, name: 'A2-0000000' },{id: 104, pid: 13, name: 'B1-0000000' },{id: 105, pid: 14, name: 'B2-0000000' },{id: 106, pid: 15, name: 'B3-0000000' },]
]

2、视图代码说明

picker 是微信小程序内置组件，基础使用方法请参见其官方文档。
mode 属性指定了 picker 是多列选择模式。
change 方法监听 picker 发生变化，用于最终获取 picker 的选择结果。
columnchange 方法监听 picker 列的变化，这个方法非常重要，在后面写 js 逻辑时要重点使用到它，因为列的变化会导致 picker 视图数据的变化。
range 是用于 picker 渲染的动态数据，其语法格式是 [[第一列数据], [第二列数据], [第三列数据]]，在我们这个需求中，除了第一列数据是不变的之外，第二列和第三列数据都会随着父级数据的变化而变化。
range-key 用于指定使用哪个字段来渲染 picker 视图。

<template><pickermode="multiSelector"@change="change"@columnchange="columnChange":value="idx":range="list"range-key='name'><view class="picker"><text>你选择的结果是：</text><text v-text='list[0][idx[0]].name'></text><text>、</text><text v-text='list[1][idx[1]].name'></text><text>、</text><text v-text='list[2][idx[2]].name'></text></view></picker>
</template>

3、业务逻辑说明

声明式变量idx，它是一个数组[第一列数据的索引, 第二列数据的索引, 第三列数据的索引]，是多列选择器选择结果的索引号列表。
声明式变量list，它是动态变化的，它用于渲染picker视图，每当columnchange列变化时，list都要发生变化，以保证 picker 多列的联动变化。注意和数据源data区分开来。
此 demo 的核心难点是updatelist(col, idx)方法的封装，它负责修改list（注意灵活使用 filter 这个数组方法），进而更新 picker 视图的联动变化。
picker 视图变化分为三种情况：当第一列发生变化时，第二列和第三列都要变化；当第二列变化时，只影响第三列的变化；当第三列变化时，无须修改list。

export default {data: function() {return {idx: [0,0,0],  // 多列选择结果的索引号列表list: []       // 用于渲染UI}},onShow() {this.updatelist(0,0)  // 初始化渲染},methods: {// 确定picker选择结果时change(e) {let idx = e.target.valuelet arr = this.listthis.idx = idxconsole.log('你选择的结果是：', arr[0][idx[0]].name, arr[1][idx[1]].name, arr[2][idx[2]].name)},// picker的列发生变化时columnChange(e) {// column列索引（0-第一列）  value是列中数组索引this.updatelist(parseInt(e.target.column), parseInt(e.target.value))},// 用于更新picker视图的方法封装updatelist(col, idx) {let list = this.list  // 视图渲染list[0] = data[0]      // picker的第一列数据// 当第一列变化时if(col==0) {// 更新第二列的数据list[1] = data[1].filter(ele=>ele.pid==list[0][idx].id)// 更新第三列的数据list[2] = data[2].filter(ele=>ele.pid==list[1][0].id)this.idx = [idx,0,0]}// 当第二列变化时if(col==1) {// 只用更新第三列数据list[2] = data[2].filter(ele=>ele.pid==list[1][idx].id)this.idx = [this.idx[0], idx, 0]}// 当第三列变化时，不用考虑// 更新list，更新picker视图this.list = list}}
}

本篇结束！！！

*获取千锋教育学习视频资料+源码笔记，进学习交流群
请添加下方微信（备注CSDN推荐）

微信小程序自定义picker多列选择器相关推荐

微信小程序全国高校多列选择器
使用微信小程序云开发完成,可以根据不同使用情况进行修改.以下皆为使用云开发预览效果图选择后显示效果第一步:picker 1.WXML: <picker mode="multiSe ...
关于微信小程序自定义Picker样式的picker-view
这里给大家介绍一下在开发微信小程序中使用到需要自定义样式的picker(picker-view)的基本用法这里就是一个很简单的自定义样式的Picker. 下面贴出代码 wxml: <picke ...
微信小程序自定义picker弹框组件
要有遥不可及的梦想,也要有脚踏实地的本事.----------- Grapefruit.Banuit Gang(香柚帮) 柚子写项目遇到了一个问题,就是微信小程序官方文档上面的弹框组件picker,它 ...
微信小程序-自定义picker选择器
github地址为什么要自定义picker 原生小程序picker不支持自定义样式,无联动. 该自定组件支持自定义数据支持自定义样式支持传入和返回对象或者基本类型支持联动(改变父列,子列根据 ...
小程序picker标题_微信小程序-自定义picker选择器
avatar 为什么要自定义picker 原生小程序picker不支持自定义样式,无联动. 该自定组件支持自定义数据支持自定义样式支持传入和返回对象或者基本类型支持联动(改变父列,子列根据关联 ...
微信小程序自定义select下拉选择组件
微信小程序自定义select下拉选择组件微信小程序原生开发中,常用到的是从底部弹起的滚动选择器(picker),而有些项目需要用到下拉选择,话不多说,下面就可以把下拉选择封装成一个自定义组件: 1. ...
微信小程序自定义组件，提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加"components"目录,然后像添加Page ...
微信小程序--自定义组件（超详细从新建到使用）
微信小程序–自定义组件微信小程序官网介绍! 本文提供给急需使用自定义组件人群,以下是博主个人理解和案例!可以辅助官网来看介绍: 从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所 ...
微信小程序56个民族数组选择器
微信小程序56个民族数组选择器 wxml部份: <view class="section"><picker bindchange="bindPicker ...

微信小程序自定义picker多列选择器

需求说明

微信小程序自定义picker多列选择器相关推荐

最新文章

热门文章