这篇文章主要介绍小程序中数据拷贝的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联公司作为成都网站建设公司,专注网站建设公司、网站设计,有关企业网站制作方案、改版、费用等问题,行业涉及成都软装设计等多个领域,已为上千家企业服务,得到了客户的尊重与认可。近期有帮同事做一个多商品评论的页面,多商品,顾名思义就是很多个商品,每个商品有星星评价,上传图片信息以及评论内容,
因为原先有写过公众号这个功能,于是自告奋勇的去写小程序的多商品评论了,结果就掉坑里了............
思路很简单 首先造一个星星的数组,五星好评就是五个星星的图片,是这样:
starList: [{ srca: "img/star02@3x.png", index: "1" }, { srca: "img/star02@3x.png", index: "2" }, { srca: "img/star02@3x.png", index: "3" }, { srca: "img/star02@3x.png", index: "4" }, { srca: "img/star02@3x.png", index: "5" }],
懒得取下标直接用index代表评分,然后根据后台返回的商品列表数组定义一个新数组pductList进行循环定义变量starLista赋值为数组
for(var i = 0; i < response.commoditys.length; i++) { response.commoditys[i].starLista = starList; }
同时有个多张图片上传的list同理进行操作,然后给循环出的星星绑定点击事件取它的下标和index进行判断循环每个商品下的星星数组动态更改src
for(var i = 0; i < app.dataList[index].starList.length; i++) { app.dataList[index].starList[i].srca = "img/star02@3x.png"; evaluateList[index].mark = idx + 1; if(i <= idx) { app.dataList[index].starList[i].srca = "img/star01@3x.png"; } evaluateList[index].mark = idx + 1; evaluateList[index].commodityid = cId; }
最后取pductList 你需要的值基本上就都在这个数组里面了 ,
--------------------------------------------------------------掉坑-----------------------------------------------
开始写小程序就按照这样的思路一直写写写,然而写到一半以后突然发现,我点击了一行小星星,所有的星星颜色都会变化,经历了排查以及抓耳挠腮 坐如针垫,东张西望之后,终于发现
在定义的新数组pductList中根据下标更改starLista 原来小星星的数组starList,最初定义的数组也会随之改变
又经历了百度 谷歌 csdn 博客园等等之后 终于想起一计,将原星星数组starList先转为字符串格式,在给定义的新数组pductList赋值的时候在转为json格式
let starListc=JSON.stringify(starList); for(let i = 0; i < response.commoditys.length; i++) { response.commoditys[i].starLista = JSON.parse(starListc); }
终于解决问题,应该是涉及到小程序的数据深拷贝的原因,这样处理一下更改的应该就是字符串而不会更改原数组,也考虑过在造个数组去赋值,但是没有这个方法简单粗暴,对于这个搞了一个早上的坑,谨以此贴,留作纪念,以及警醒自己。。。。。。。。。。。。。。。
以上是“小程序中数据拷贝的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
网站标题:小程序中数据拷贝的示例分析-创新互联
本文地址:https://www.cdcxhl.com/article44/eeshe.html
成都网站建设公司_创新互联,为您提供搜索引擎优化、虚拟主机、外贸网站建设、动态网站、服务器托管、外贸建站
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联