微信小程序中多列选择器 range-key 的运用

why 468 2024-08-19

这篇文章主要为大家详细介绍了微信小程序多列选择器range-key的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序多列选择器的具体代码，供大家参考，具体内容如下

<picker mode="multiSelector" bindchange="bindMultiPickerChange2" bindcolumnchange="bindMultiPickerColumnChange2" value="{{multiIndex}}" range="{{objectMultiArray}}" range-key="{{&#39;name&#39;}}">
 <view class="picker">
  当前选择：{{objectMultiArray[0][multiIndex2[0]].name}}，{{objectMultiArray[1][multiIndex2[1]].name}}
 </view>
</picker>

Page({
 
 /**
 * 页面的初始数据
 */
 data: {
 objectMultiArray: [
  [
  {
   id: 0,
   name: &#39;无脊柱动物&#39;
  },
  {
   id: 1,
   name: &#39;脊柱动物&#39;
  }
  ], [
  {
   id: 0,
   name: &#39;扁性动物&#39;
  },
  {
   id: 1,
   name: &#39;线形动物&#39;
  },
  {
   id: 2,
   name: &#39;环节动物&#39;
  },
  {
   id: 3,
   name: &#39;软体动物&#39;
  },
  {
   id: 3,
   name: &#39;节肢动物&#39;
  }
  ]
 ],
 multiIndex2: [0, 0],
 },
 
 
 bindMultiPickerChange2: function (e) {
 console.log(&#39;picker发送选择改变，携带值为&#39;, e.detail.value)
 this.setData({
  multiIndex2: e.detail.value
 })
 },
 bindMultiPickerColumnChange2: function (e) {
 console.log(&#39;修改的列为&#39;, e.detail.column, &#39;，值为&#39;, e.detail.value);
 var data = {
  objectMultiArray: this.data.objectMultiArray,
  multiIndex2: this.data.multiIndex2
 };
 data.multiIndex2[e.detail.column] = e.detail.value;
 switch (e.detail.column) {
  case 0:
  switch (data.multiIndex2[0]) {
   case 0:
   data.objectMultiArray[1] = [
    { id: 0, name: &#39;扁性动物&#39; },
    { id: 1, name: &#39;线形动物&#39; },
    { id: 2, name: &#39;环节动物&#39; },
    { id: 3, name: &#39;软体动物&#39; },
    { id: 3, name: &#39;节肢动物&#39; }
   ];
   // data.multiArray[2] = [&#39;猪肉绦虫&#39;, &#39;吸血虫&#39;];
   break;
   case 1:
   data.objectMultiArray[1] = [
    { id: 0, name: &#39;鱼&#39; },
    { id: 1, name: &#39;线形两栖动物&#39; },
    { id: 2, name: &#39;爬行动物&#39; }
   ];
   break;
  }
  data.multiIndex2[1] = 0;
  // data.multiIndex[2] = 0;
  break;
 }
 this.setData(data);
 }
 
 
})

请记得点赞额！！！

以上就是本文的全部内容，希望对大家的学习有所帮助。

uniapp开发app框架在提升开发效率中的独特优势与应用探索

468 2024-08-19

微信小程序中多列选择器 range-key 的运用

uniapp开发app框架在提升开发效率中的独特优势与应用探索

探索flutter框架开发的app在移动应用市场的潜力与挑战

智慧屏第三方App安装如何提升用户体验与功能拓展

最近发表

更多内容

小程序SDK

Finclip技术文档

小程序开发

小程序容器

小程序框架

Finclip小程序平台

Finclip用户投稿

车联网

推荐文章

小程序SDK是什么意思？小程序sdk和插件有什么区别？

小程序支付功能怎么实现？

企业app开发流程是什么？

app运营模式有哪些？

小程序多端引流怎么做？

小程序生态分析的机会和威胁

Flutter入门这一篇效率文章就够了

原生与跨平台解决方案分析,跨平台软件开发技术方案

热更新技术：让软件更新变得更加轻松快速

解决方案

银行解决方案

证券解决方案

互联网解决方案

政企OA解决方案

科技解决方案

loT解决方案

信任解决方案

热评文章

AppCan:基于混合模式的移动应用开发,移动混合模

Hybrid App混合模式开发的了解

小程序容器技术助力券商数字营销突围，小程序容器化的意

用mpvue开发微信小程序基础知识（vue.js开发

小程序多端框架全面测评对比，强烈推荐！

券商app架构 - 解析券商应用程序的构建与设计