小程序picker解决方案

举报
原来是咔咔 发表于 2022/03/27 03:13:50 2022/03/27
1.2k+ 0 0
【摘要】 看完这篇就少了一个拦路虎 前端代码:        这里没有什么难点,就一个注意点就是当你的数组为二维数组的时候需要设置range-key='你需要显示的字段名'        value="{undefined{index}}",这里的index就是...

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

前端代码:

       这里没有什么难点,就一个注意点就是当你的数组为二维数组的时候需要设置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

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

作者其他文章

评论(0

抱歉,系统识别当前为高风险访问,暂不支持该操作

    全部回复

    上滑加载中

    设置昵称

    在此一键设置昵称,即可参与社区互动!

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。