Example of using range-key multi-column selector in WeChat applet-Mini Program Development-php.cn

Home

WeChat Applet

Mini Program Development

Example of using range-key multi-column selector in WeChat applet

黄舟

May 16, 2018 pm 02:50 PM

AppletsSelector

This article mainly introduces in detail how to use the range-key of the multi-column selector of the WeChat applet. It has a certain reference value. Interested friends can refer to it.

The examples in this article are Everyone shared the specific code of the multi-column selector of the WeChat applet for your reference. The specific content is as follows

<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);
 }


})

The above is the detailed content of Example of using range-key multi-column selector in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn