微信小程序中 picker组件 多列选择器(自定义选择器)实例

在学习微信小程序中发现自定义选择器的联动效果实现起来比较困难,在实际项目中应用还很多,特整理出来帮助实现项目中类似的效果。如下图:
在这里插入图片描述

wxml的代码:
<view style="display:flex;">
  <text>请选择您感兴趣的技术:</text>
  <picker 
  mode="multiSelector"
  range="{
   {multiSelectorData}}"
  value="{
   {multiSelectorIndex}}"
  bindcolumnchange="columnChange"
  bindchange="multiSelectorChange"
  >{
   {
   multiSelectorValue}}</picker>
</view>
js代码:
  data:{
   
    multiSelectorData:[
      ['前端开发','Java后台开发'],
      ['原生开发', '全栈开发'],
      ['HTML/HTML5', 'CSS/CSS3', 'JavaScript', 'jQuery','Bootstrap']
    ],
    multiSelectorIndex:[0,0,0],
    multiSelectorValue:'Web技术'
  }
  • 3
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序自定义Picker选择器是一个内置组件,它可以方便地实现单项选择功能。使用自定义Picker选择器,用户可以从列表选择一个选项,以便进行相关操作。 实现自定义Picker选择器的步骤如下: 1. 在所需页面的wxml文件,添加Picker组件。例如,可以使用以下代码创建一个Picker选择器: ``` <view> <text>请选择:</text> <picker mode="selector" range="{{array}}" bindchange="bindPickerChange"> <view class="picker"> {{array[index]}} </view> </picker> </view> ``` 在上述代码,`array` 是一个包含所有选项的数组,`index` 是选择项的下标。 2. 在对应页面的js文件,对Picker组件的选择事件进行处理。通过`bindchange`绑定一个事件处理函数,当用户选择一个选项时,该函数会被触发。 ```javascript Page({ data: { array: ['选项1', '选项2', '选项3', '选项4'], index: 0 }, bindPickerChange: function(e) { this.setData({ index: e.detail.value }) } }) ``` 在上述代码,`data` 对象的 `array` 为选项数组,`index` 为当前选的选项下标。通过 `bindPickerChange` 函数修改 `index` 可以实现选项的切换。 3. 根据Picker选择器的值进行相应操作。可以在 `bindPickerChange` 函数添加逻辑,根据选择的选项值进行相应的处理操作,例如显示选的选项、更新页面数据等。 通过以上步骤,就可以轻松地在微信小程序实现自定义Picker选择器的单项选择功能。用户可以方便地从给定的选项列表选择一个选项,以便进行后续操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值