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

最新推荐文章于 2024-08-09 15:31:19 发布

World_Mei

最新推荐文章于 2024-08-09 15:31:19 发布

阅读量3.1k

点赞数 3

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/World_Mei/article/details/106234379

版权

本文介绍了微信小程序中使用picker组件创建多列联动选择器的方法，通过示例代码展示如何实现这一功能，适用于需要在小程序中实现自定义选择器联动效果的场景。

摘要由CSDN通过智能技术生成

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

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技术'
  }