微信小程序下拉框之二维数组或对象

js文件

Page({data:{//户型   这是一个本地的对象，然后绑定到页面上
    pic_array: [{ id: 13, name: ‘1室1厅1卫‘ },{ id: 14, name: ‘1室2厅1卫‘ },{ id: 15, name: ‘2室1厅1卫‘ },{ id: 16, name: ‘3室1厅2卫‘ },{ id: 17, name: ‘4室1厅2卫‘ },{ id: 18, name: ‘5室1厅3卫‘ },{ id: 19, name: ‘6室1厅3卫‘ },{ id: 20, name: ‘7室以上‘ },]，hx_index: 0；}， bindPickerChange_hx: function (e) {console.log(‘picker发送选择改变，携带值为‘, e.detail.value);this.setData({   //给变量赋值hx_index: e.detail.value,  //每次选择了下拉列表的内容同时修改下标然后修改显示的内容，显示的内容和选择的内容一致
    })console.log(‘自定义值:‘, this.data.hx_select);},
})

wxml

      <picker name="picker_hx" class="cybm_pic_1" value="{{pic_array[hx_index].id}}" data-selecthx="{{pic_array[hx_index].name}}" range="{{pic_array}}" range-key="{{‘name‘}}"  bindchange="bindPickerChange_hx"  ><view class="picker" >户型:  {{pic_array[hx_index].name}} //指定数组中指定下标的name键对应的值 </view></picker>

属性名range  类型Array/Object Array  存放你的本地数据数组或者对象数组，需要加载的数据

属性名range-key  类型String  当 range 是一个 二维Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容

属性名value  类型Array  value 每一项的值表示选择了 range 对应项中的第几个（下标从 0 开始）

属性名data-  类型自定义属性后更的属性名字可以自定义 当你需要设置其他值得时候可以使用  可选

更多专业前端知识，请上【猿2048】www.mk2048.com

微信小程序下拉框之二维数组或对象相关推荐

微信小程序下拉框插件_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = ...
下拉多选框微信小程序_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = ...
下拉多选框微信小程序_微信小程序下拉框组件使用方法
这篇文章主要为大家详细介绍了微信小程序下拉框组件的使用方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正.[推荐教程:小程序开发教程] 适用场景 ...
下拉多选框微信小程序_微信小程序下拉框功能的实例代码
微信小程序组件里没有下拉框,正好要用到,记下来以后参考 wxml代码选择接收班级 {{grade_name}} {{item}} wxss代码 /* 顶部 */ .top{ width: 100vw ...
微信小程序下拉框插件_微信小程序自定义select下拉选项框组件的实现代码_清玖_前端开发者...
知识点:组件,animation,获取当前点击元素的索引与内容微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...
mpvue微信小程序下拉框搜索组件
初始下拉选择如(图一) 最终效果如(图二) 思路左边是输入框,可以进行模糊查询,右边图标进行选择(简单就是根据input输入值进行过滤) 具体代码 <template><div c ...
微信小程序下拉框组件使用
适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = region,以及value = "一维数组" //.w ...
微信小程序下拉框的实现功能
简单实用的下拉框实现,1min就能学会 1.wxml文件: <view class="classify-kuangjia">< ...
微信小程序下拉框选择
wxml代码 <view class='top-selected' bindtap='bindShowMsg'><text>{{grade_name}}</text> ...

微信小程序下拉框之二维数组或对象

微信小程序下拉框之二维数组或对象相关推荐

最新文章

热门文章