• <div id="3ed75da3"></div>




  • 
       
       
       

      狗万官网酒店 > 狗万官网下载 > 微信小程序自定义多列选择器使用详解_javascript艺术

      微信小程序自定义多列选择器使用详解_javascript艺术

      来源: 2019-08-04 19:43 我来投稿 参与评论
      这篇文章主要为大家详细介绍了微信小程序自定义多列选择器使用,具有原则性的参考价值,感兴趣的同伴们可以参考一下

      一、预览

      微信小程序在自带的表单组件中进入了选择器picker,并送出了常用的年月和省市区三级联动选择器,但日常开支中不可能仅仅使用这些选择器,故而我们在读书时先写一个常见的自定义选择器,用于满足项目中的日常需要。
      先给出效果图:(先声明选择器中数据为高考使用,与实际状况无关)

      二、picker属性

      一度简单地多列选择器只要送picker组件加属性mode="multiSelector"即可,绑定数据时采用range来绑定一个数组作为显示内容,下是合法给出的习性解释。

      三、创造组件

      咱可以先在.wxml建一个自定义picker组件:

      <picker 
       mode="multiSelector" 
       bindchange="bindCustomPickerChange" 
       bindcolumnchange="bindCustomPickerColumnChange" 
       value="{{customIndex}}" 
       range="{{onlyArray}}"
       >
       <view>
        多列自创选择器:{{onlyArray[0][customIndex[0]]}},{{onlyArray[1][customIndex[1]]}},{{onlyArray[2][customIndex[2]]}}
       </view>
      </picker>

      要小心的是,此地的onlyArray数组只是目前显示内容的数组,并不是咱们任何数目的数组。

      四、自定义函数

      写好组件,咱就来写js文件,思路如下:

      1.先创建页面所需数据

      Page({
      
       /**
       * 页面的起始数据
       */
       data: {
       //目前当选数组的主业标值
       customIndex: [0, 0, 0],
       //目前当选数组
       onlyArray: [
        [],
        [],
        []
       ],
       //customArray假设为我们从后台获取到的json多少
       customArray: [{
        name: '百度',
        dept: [{
         name: '追寻',
         product: [{
          name: '百度搜索'
          },
          {
          name: '百度一下'
          },
         ]
         },
         {
         name: '团购',
         product: [{
          name: '百度糯米'
         }, {
          name: '饿了么'
         }]
         },
         {
         name: '音乐',
         product: [{
          name: '百度音乐'
         }]
         },
         {
         name: '问答社区',
         product: [{
          name: '百度贴吧'
         }]
         }
        ]
        },
      
        {
        name: '腾讯',
        dept: [{
         name: '张罗',
         product: [{
          name: 'QQ'
          },
          {
          name: '微信'
          },
         ]
         },
         {
         name: '视频',
         product: [{
          name: '腾讯视频'
          },
          {
          name: '搜狐视频'
          },
         ]
         },
      
         {
         name: '短视频',
         product: [{
          name: '微视'
         }]
         }
        ]
        },
       ],
       },

      2.加载页面时送出赋值函数。

      可以见到,目前当选数组onlyArray是空的,在小程序显示时会直接显示成空,故而需要在页面创建时送一个初始值,本条初始值使用customIndex数组来送出,也得以用于页面数据回填。代码如下:

       /**
       * 生命周期函数--监听页面加载
       */
       onLoad: function(options) {
       var data = {
        customArray: this.data.customArray,
        customIndex: this.data.customIndex,
        onlyArray: this.data.onlyArray,
       };
       for (var i = 0; i < data.customArray.length; i++) {
        data.onlyArray[0].push(data.customArray[i].name);
       }
       for (var j = 0; j < data.customArray[data.customIndex[0]].dept.length; j++) {
        data.onlyArray[1].push(data.customArray[data.customIndex[0]].dept[j].name);
       }
       for (var k = 0; k < data.customArray[data.customIndex[0]].dept[data.customIndex[1]].product.length; k++) {
        data.onlyArray[2].push(data.customArray[data.customIndex[0]].dept[data.customIndex[1]].product[k].name);
       }
       this.setData(data);
       },

      3.创造组件监听函数。

      此地需要两个函数,暌违是bindchange(开辟组件后点击确定触发)和bindcolumnchange(开辟组件后滑动列触发)。

      //多列自定义选择器改变value的主意
       bindCustomPickerChange: function(e) {
       var customArray = this.data.customArray,
        customIndex = this.data.customIndex,
        onlyArray = this.data.onlyArray;
      
       console.log('picker发送选择改变,带走值为', e.detail.value);
       //此地e.detail.value为目前选择的排的主业标值数组,如[0,1,0]
       
       console.log('picker说到底摘取值为:', onlyArray[0][customIndex[0]], onlyArray[1][customIndex[1]], onlyArray[2][customIndex[2]]);
       this.setData({
        customIndex: e.detail.value
       })
       },
      
       //多列自创选择器换列方法
       bindCustomPickerColumnChange: function(e) {
       var customArray = this.data.customArray,
        customIndex = this.data.customIndex,
        onlyArray = this.data.onlyArray;
      
       customIndex[e.detail.column] = e.detail.value;
       // console.log(onlyArray);
      
       var searchColumn = () => {
        for (var i = 0; i < customArray.length; i++) {
        var arr1 = [];
        var arr2 = [];
        if (i == customIndex[0]) {
         for (var j = 0; j < customArray[i].dept.length; j++) {
         arr1.push(customArray[i].dept[j].name);
         if (j == customIndex[1]) {
          for (var k = 0; k < customArray[i].dept[j].product.length; k++) {
          arr2.push(customArray[i].dept[j].product[k].name);
          }
          onlyArray[2] = arr2;
         }
         }
         onlyArray[1] = arr1;
        }
        };
       }
      
       switch (e.detail.column) {
        case 0:
        customIndex[1] = 0;
        customIndex[2] = 0;
        searchColumn();
        break;
        case 1:
        customIndex[2] = 0;
        searchColumn();
        break;
       }
       this.setData({
        onlyArray: onlyArray,
        customIndex: customIndex
       });
       },

      要求说明的是:

      1).bindchange和bindcolumnchange两个函数都是eventhandle项目的,但他们绑定的数目不同。

    1. bindchange函数的e.detail.value为目前选择的任何列的主业标值数组,如[0,1,0]代表当前选择器的三行数据下标;
    2. bindcolumnchange函数的e.detail.column代表当前选择的是第几列,e.detail.value为现实的目前选择的顺序几列的数目的下标,是一番数字。
    3. 2).在bindcolumnchange函数中,开展e.detail.column的论断,

    4. 如果e.detail.column == 0,则代表改变的是至关重要行的数目,这会儿要将第二行和程序三行的数目下标全部置为0,即置为缺省数据,并将onlyArray数组进行联动变化;
    5. 如果e.detail.column ==1,则代表改变的是第二行的数目,这会儿将先后三行的数目下标置为0,名将onlyArray数组进行联动变化;
    6. 如果e.detail.column ==2,则代表改变的是第三行的数目,而前两行不需要开展变化,故不需要判断这种状况之数组变化。
    7. 3).点击确定之后,合同bindchange艺术得到选择结果。咱可以得到的数目包括两部分,

    8. 一是目前选择的任何列的主业标值数组,即customIndex,多少回填时即使用这部分数据;
    9. 二是目前选择的情节,咱用customIndex中的下标查找onlyArray数组中的具体内容得到切实值,例如 " 百度,追寻,百度一下 "。
    10. 五、赶上的题目

      在此地碰到一个bug,如果在switch说话中将customIndex[0]或customIndex[1]置为0的讲话放在searchColumn()后边时,数组显示会混乱,如图所示:

      即第一行换列时,如果第二行数据下标非0,则第三行数据无法对应上。

      根据上述bug叙述,我猜想可能是在switch认清中将后进数据下标置为0的借鉴晚于数组变化的的主意才会导致此问题。

      故而后来将customIndex[0]或customIndex[1]置为0的讲话放在searchColumn()明天才解决了此问题。

      六、总结

      这会儿我们的自定义多列选择器就建好了,利用json多少作为总数据,可以自定义选项,可以得到想要的两部分数据,可以数据回填,基本满足了品种中的实际要求。

      上述就是本文的方方面面内容,瞩望对大家的上学有所帮助,也愿意大家多多支持脚本的师。

      义务编辑:狗万官网酒店
       
       
      0% (0)
       
       
      0% (0)
      机长评论( ) 请自觉遵守互联网相关的富民政策法规,不准发布色情、暴力、反动的议论。
      地名: 匿名?