uniapp picker组件实现二级联动

朴灿烈づ我的快乐病毒、 2022-12-29 09:55 693阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYSF9jc2Ru_size_16_color_FFFFFF_t_70_pic_center]  
效果图如上

html

<picker mode="multiSelector" @change="bindPickerChange" @columnchange="columnchange" :value="index" :range="array"
    	 range-key="title">
    	<view class="uni-input">{
       {title}}</view>
    
    </picker>

js

<script>
    	export default {
    		data() {
    			return{
    				index: [0, 0],
    				array: [[],[]],
    				childArr: [], // 二级分类数据源
    				title: '请选择',
    			}
    		},
    		methods: {
    			// 任务分类
    			getCate() {
    				this.Get('请求的接口地址').then((res) => {
    					if (!res.err) {
    						// 返回的数据格式
    						// [
    							// {id: 4, title: "悬赏", desc: "", child: [{id: 10, title: "现金悬赏", desc: ""}]}
    						// ]
    						// 一级分类的数据源
    						this.array[0] = res.result
    						// 将数据源中的二级分类 push 进 childArr，作为二级分类的数据源
    						this.childArr = res.result.map((item) => item.child)
    						// 第一次打开时，默认给一级分类添加它的二级分类
    						this.array[1] = this.childArr[0]
    					}
    				})
    			},
    			// 获取二级分类
    			columnchange(e) {
    				// 当滚动切换一级分类时，为当前的一级分类添加它的子类
    				if (e.detail.column == 0) {
    					// #ifdef H5
    					// 在小程序中直接赋值无效  H5 可直接赋值
    					this.array[1] = this.childArr[e.detail.value]
    					// #endif
    					// #ifdef MP-WEIXIN
    					// 在 H5 环境下 $set 会导致一级分类无法滚动， 小程序正常运行
    					this.$set(this.array, 1, this.childArr[e.detail.value])
    					// #endif
    				}
    			},
    
    			// 选择任务分类
    			bindPickerChange: function(e) {
    				console.log('picker发送选择改变，携带值为', e.target.value)
    				let value = e.target.value;
    				this.index = value;
    				if (this.array[0].length != 0) {
    					this.title = this.array[0][this.index[0]].title
    				};
    				if (this.array[1].length != 0) {
    					this.title += ',' + this.array[1][this.index[1]].title
    				}
    
    			},
    		}
    	}
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYSF9jc2Ru_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/930fc186e0a0416bab98e9a4838905af.png

发表评论取消回复

表情：

评论列表（有 0 条评论，693人围观）

还没有评论，来说两句吧...

相关阅读

相关【JavaWeb】实现二级联动菜单

实现效果 ![%E4%BA%8C%E7%BA%A7%E8%81%94%E5%8A%A8%E8%8F%9C%E5%8D%95%E6%95%88%E6%9E%9C.gif][

Myth丶恋晨/ 2023年06月01日 11:11/ 0 赞/ 134 阅读

相关 uniapp picker组件实现二级联动

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

朴灿烈づ我的快乐病毒、/ 2022年12月29日 09:55/ 0 赞/ 694 阅读

相关实现省市二级联动效果

实现效果： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

快来打我*/ 2022年10月10日 12:32/ 0 赞/ 287 阅读

相关二级联动菜单--常见的城市二级联动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD>

蔚落/ 2022年09月17日 07:28/ 0 赞/ 236 阅读

相关二级联动

以省份和城市为例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

电玩女神/ 2022年07月27日 14:42/ 0 赞/ 237 阅读

相关 vue学习之mintui picker选择器实现省市二级联动

Mint UI 使用文档：[https://mint-ui.github.io/docs/\/zh-cn2][https_mint-ui.github.io_docs_zh-c

柔情只为你懂/ 2022年06月17日 11:08/ 0 赞/ 306 阅读

相关 jquery实现省市二级联动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://w

桃扇骨/ 2022年06月04日 09:25/ 0 赞/ 313 阅读

相关 layui实现二级联动

使用layui的时候使用js的时候就要注意了很有可能这个时候js的很多事件都不好使了 ![70][] ![70 1][] ![70 2][]

灰太狼/ 2022年05月28日 04:22/ 0 赞/ 228 阅读

相关【easyui】combobox实现二级联动

想要实现的效果类似地址栏的选择，选择不同省之后，下面的地级市联动发生变化思路 1. 在一级的下拉框中，除了ID和NAME之外，还要给数据赋一个Value值

桃扇骨/ 2022年05月26日 06:09/ 0 赞/ 404 阅读

相关二级联动

<select id="depositorytype" name="depositorytype" οnchange="ld();" class="zj-way">

刺骨的言语ヽ痛彻心扉/ 2022年04月02日 15:24/ 0 赞/ 257 阅读