小程序picker解决方案

简介: 小程序picker解决方案

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


前端代码:


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


     value="{{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,我们这样的方案宣告失败

image.png



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


      我们就可以使用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
        })
      }

 


 


相关文章
|
5月前
|
存储 小程序 JavaScript
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
|
5月前
|
小程序 前端开发 安全
小程序全栈开发中的跨域问题及其解决方案
【4月更文挑战第12天】本文探讨了小程序全栈开发中的跨域问题及其解决方案。跨域问题源于浏览器安全策略,主要体现在前后端分离、第三方服务集成和数据共享上。为解决此问题,开发者可采用CORS、JSONP、代理服务器、数据交换格式和域名策略等方法。实践中需注意安全性、兼容性和性能。通过掌握这些解决方案,开发者能更好地处理小程序的跨域问题,提升用户体验。
290 0
|
5月前
|
移动开发 小程序 API
微信外部浏览器或短信链接唤起微信小程序的解决方案
微信外部浏览器或短信链接唤起微信小程序的解决方案
1035 1
|
5月前
|
小程序
小程序一直未提审的原因及解决方案
小程序一直未提审的原因及解决方案
73 11
|
5月前
|
移动开发 小程序 API
【小程序质量提优解决方案】(三)内嵌H5页面访问受限
【小程序质量提优解决方案】(三)内嵌H5页面访问受限
345 0
|
5月前
|
移动开发 小程序 JavaScript
【小程序质量提优解决方案】(二)内嵌H5加载异常(404)
【小程序质量提优解决方案】(二)内嵌H5加载异常(404)
102 0
|
2天前
|
机器学习/深度学习 人工智能 小程序
做AI运动小程序有哪些解决方案,如何进行选型?
随着深度学习技术的发展,AI运动应用如“天天跳绳”和“百分运动”变得流行。本文探讨了将AI运动功能引入微信小程序的可行性,并介绍了几种解决方案。实现AI运动计数的关键技术包括视频抽帧、人体检测、姿态识别等。文中详细描述了离线方案(全离线和半离线)和原生方案(自研AI引擎和成熟插件)的不同实现方式,并对各种方案进行了对比,建议优先选择成本低、体验佳的AI运动识别插件方案。
|
14天前
|
小程序 前端开发 API
微信小程序 - 调用微信 API 回调函数内拿不到 this 问题(解决方案)
本文讨论了在微信小程序中调用API回调函数时无法获取到`this`上下文的问题,并提供了解决方案。在回调函数中,使用一个变量(如`that`)来保存当前的`this`引用,然后在回调内部使用这个变量来访问当前页面的数据和方法。
|
2月前
|
小程序 前端开发 JavaScript
【电商新机遇】支付宝小程序如何助你打造爆款电商解决方案?揭秘背后的技术奥秘!
【8月更文挑战第27天】本文详细介绍如何利用支付宝小程序构建电商应用,覆盖从项目初始化、页面设计、功能开发到数据分析的全流程。首先,需注册开发者账号并安装相关工具;随后创建项目,并按示例配置基本页面结构;接着设计商品列表等界面布局;再实现商品展示等功能;最后运用支付宝提供的工具进行数据分析,以优化用户体验及营销策略。跟随本教程,您将能打造出一款完整的电商小程序。
64 1
|
3月前
|
存储 JSON JavaScript
小程序优化:第三方SDK过大解决方案
小程序开发中,项目目录中存放过大的js包,会被警告影响手机端性能,同时让开发编译启动变得很慢。慢是其次,单是影响性能这一点,就需要解决一下。