小程序picker解决方案

看完这篇就少了一个拦路虎

前端代码：

       这里没有什么难点，就一个注意点就是当你的数组为二维数组的时候需要设置range-key='你需要显示的字段名' 

      value="{undefined{index}}",这里的index就是数据的索引值，这个值的作用是显示数据的第几个值，比如这里是1，就会在你打开picker标签的时候，显示的就是数组索引为1的这个字段值

  

   

    

     

    
    

     
        <view class="m-inputPart">
     
    
   

    

     

    
    

     
            <view>选择分类</view>
     
    
   

    

     

    
    

     
            <picker value="{{index}}" bindchange='changes' range="{{category}}" range-key='{{"name"}}'>
     
    
   

    

     

    
    

     
                                
     
    
   

    

     

    
    

     
                <input cursorSpacing="20" value="{{category[index].name}}"></input>
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
            </picker>
     
    
   

    

     

    
    

     
        </view>
     
    
  
 

现在我们来解决第一个难点

1.怎么获取到循环数组的id

      这里应该会有很多人跟我开始一样，我设置一个自定义属性就可以了啊！当你调试的时候会发现，所有的id都是一样的，因为你自定义属性肯定会这样定义data-id="{{category[index].id}}",这里就是第一个坑了，你会发现你value的值是多少，那个id就全是这个索引的id，我们这样的方案宣告失败

这里来介绍一下我自己的做法：

       我们就可以使用picker的本身属性，当点击picker时会触发bindchange这个事件，就会获取value这个值，下来我们将选择的这个value值保存起来，我们在将分类的数据保存到缓存中

     开始循环分类数据，判断当分类的索引值跟选择的value相等时，声明一个变量categoryindex，将分类数据的索引保存起来

     下来直接在分类数据拿到选择的分类id，保存到缓存中

js代码：

  

   

    

     

    
    

     

      /*
     
    
   

    

     

    
    

     

      author:咔咔
     
    
   

    

     

    
    

     

      address:陕西西安
     
    
   

    

     

    
    

     

      wechat:fangkangfk
     
    
   

    

     

    
    

     

      */
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      changes: function (e) {
     
    
   

    

     

    
    

     
      var num = e.detail.value;
     
    
   

    

     

    
    

     
      console.log('选择了第'+num+'个')
     
    
   

    

     

    
    

     

            wx.setStorageSync('index', num);
     
    
   

    

     

    
    

     
      var categoryData = wx.getStorageSync('categoryData');
     
    
   

    

     

    
    

     
      for (var i = 0; i<categoryData.length;i++){
     
    
   

    

     

    
    

     
        if (i == num){
     
    
   

    

     

    
    

     
          var categoryIndex = num;
     
    
   

    

     

    
    

     

              }
     
    
   

    

     

    
    

     

            }
     
    
   

    

     

    
    

     
      var categoryId = categoryData[categoryIndex]['id'];
     
    
   

    

     

    
    

     

            wx.setStorageSync('categoryId', categoryId);
     
    
   

    

     

    
    

     
      this.setData({
     
    
   

    

     

    
    

     
        index: num,
     
    
   

    

     

    
    

     

            })
     
    
   

    

     

    
    

     

          },
     
    
  
 

提交数据时处理：

   提交数据时获取分类id，存在时就直接使用，不存在的时候就是默认第一个即可，这样就成功的获取到了分类数据的id

  

   

    

     

    
    

     
      var categoryId = wx.getStorageSync('categoryId');
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
      if (categoryId) {
     
    
   

    

     

    
    

     
        var category_id = categoryId
     
    
   

    

     

    
    

     

            } else {
     
    
   

    

     

    
    

     
        var categoryData = wx.getStorageSync('categoryData');
     
    
   

    

     

    
    

     
        var category_id = categoryData[0]['id'];
     
    
   

    

     

    
    

     

            }
     
    
  
 

我们还需要在一次进入页面的时候让其显示使我们之前选择的数据

    这个index就是picker的value属性的值，这个值上边也说了是显示数据的索引值

   index这个缓存来自选择的时候保存的数据

   判断这个index这个是否存在，存在的话就直接将value的值设置成他既可以，反之就是默认0

  

   

    

     

    
    

     
      var categoryIndex = wx.getStorageSync('index');
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
      if (categoryIndex){
     
    
   

    

     

    
    

     
        this.setData({
     
    
   

    

     

    
    

     
          index:categoryIndex
     
    
   

    

     

    
    

     

              })
     
    
   

    

     

    
    

     

            }else{
     
    
   

    

     

    
    

     
        this.setData({
     
    
   

    

     

    
    

     
          index:0
     
    
   

    

     

    
    

     

              })
     
    
   

    

     

    
    

     

            }
     
    
  
 

文章来源: blog.csdn.net，作者：咔咔-，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/fangkang7/article/details/82804751