小程序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
        })
      }

 


 


相关文章
|
2月前
|
人工智能 小程序 前端开发
一个小程序轻量AR体感游戏,开发实现解决方案
针对青少年运动兴趣不足问题,AR体感游戏凭借沉浸式互动体验脱颖而出。结合小程序“AI运动识别”插件与WebGL渲染技术,可实现无需外设的轻量化AR健身游戏,如跳糕、切水果等,兼具趣味性与锻炼效果,适用于儿童健身及职工团建,即开即玩,低门槛高参与。
|
7月前
|
小程序 前端开发
2025商业版拓展校园圈子论坛网络的创新解决方案:校园跑腿小程序系统架构
校园跑腿小程序系统是一款创新解决方案,旨在满足校园配送需求并拓展校友网络。跑腿员可接单配送,用户能实时跟踪订单并评价服务。系统包含用户、客服、物流、跑腿员及订单模块,功能完善。此外,小程序增设信息咨询发布、校园社区建设和活动组织等功能,助力校友互动、经验分享及感情联络,构建紧密的校友网络。
274 1
2025商业版拓展校园圈子论坛网络的创新解决方案:校园跑腿小程序系统架构
|
7月前
|
JSON 监控 小程序
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
603 14
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
2653 1
|
8月前
|
小程序 UED
拓展校友网络的创新解决方案:校园论坛圈子小程序+跑腿+二手市场系统
这是一款基于小程序的校园跑腿服务平台,支持多种注册登录方式、下单支付、跑腿接单配送、订单跟踪评价及物流查询功能,并配备客服模块提升用户体验。系统包含用户、客服、物流、跑腿员和订单五大核心模块,功能完善。此外,平台还拓展了校友网络功能,如信息咨询发布、校园社区建设和活动组织等,旨在增强校友互动与联系,形成紧密的校友生态。
254 4
|
人工智能 小程序 搜索推荐
uni app下开发AI运动小程序解决方案
本文介绍了在小程序中实现AI运动识别的解决方案。该方案依托于UNI平台,通过高效便捷的插件形式,实现包括相机抽帧控制、人体识别、姿态识别等在内的多项功能,无需依赖后台服务器,大幅提高识别效率和用户体验。方案内置多种运动模式,支持自定义扩展,适用于AI健身、云上赛事、AI体测等多场景,适合新开发和存量改造项目。
|
小程序 机器人 开发者
QQ 小程序已发布,但无法被搜索的解决方案
我的 QQ 小程序在 2024 年 8 月就已经审核通过,上架后却一直无法被搜索到。打开后,再在 QQ 上下拉查看 “最近使用”,发现他出现一下又马上消失。
216 2
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
900 1
|
机器学习/深度学习 人工智能 JSON
微信小程序原生AI运动(动作)检测识别解决方案
近年来,疫情限制了人们的出行,却推动了“AI运动”概念的兴起。AI运动已在运动锻炼、体育教学、线上主题活动等多个场景中广泛应用,受到互联网用户的欢迎。通过AI技术,用户可以在家中进行有效锻炼,学校也能远程监督学生的体育活动,同时,云上健身活动形式多样,适合单位组织。该方案成本低、易于集成和扩展,已成功应用于微信小程序。
|
机器学习/深度学习 人工智能 小程序
做AI运动小程序有哪些解决方案,如何进行选型?
随着深度学习技术的发展,AI运动应用如“天天跳绳”和“百分运动”变得流行。本文探讨了将AI运动功能引入微信小程序的可行性,并介绍了几种解决方案。实现AI运动计数的关键技术包括视频抽帧、人体检测、姿态识别等。文中详细描述了离线方案(全离线和半离线)和原生方案(自研AI引擎和成熟插件)的不同实现方式,并对各种方案进行了对比,建议优先选择成本低、体验佳的AI运动识别插件方案。

热门文章

最新文章