本次项目使用的是基于JQ的js技术,页面直接的数据传递采用了sessionStorage存储,根据后台返回的数组长度渲染页面,采用js拼接html方式,关注点有单选框的写法,点击本条数据的上下拉按钮,效果如图:
![](https://i-blog.csdnimg.cn/blog_migrate/320d363a4e516cf145419d21af5cf61b.gif)
1.登录后需要存储手机号和登录接口返回的产品数组,存储sessionStorage过程如下:
![](https://i-blog.csdnimg.cn/blog_migrate/e3610c924455df0bf4f1de58ce61925d.png)
2.在产品页需要取出sessionStorage里的值:
![](https://i-blog.csdnimg.cn/blog_migrate/aa214f9c25ee2986cfde2c83807cf97a.png)
3.js拼接html模板以及配合接口请求回的产品数组进行循环渲染:
![](https://i-blog.csdnimg.cn/blog_migrate/9765522f2c648b2c1b4cfc3fa8b27cd2.png)
4.点击下拉效果的js函数:
5.选择产品实现单选框效果:
总结:引入js脚本时要注意脚本引入的先后顺序,以上内容如有不妥或更好的实现方式,请多指教,谢主隆恩呐。告辞~