添加购物车，横向滑动选择属性
Posted 躺着就赢了
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了添加购物车，横向滑动选择属性相关的知识，希望对你有一定的参考价值。
最近写的一个微信的商城系统，其他功能我都会稍后更新，这里主要更新一个横向滑动选择属性功能，注意的是，这个功能下面的第二种属性我没有随着第一种的选择变化而变化（项目比较急，没写），需要的话稍微改一下就可以，
先上效果图
就是红框里面的模块，颜色与下面的规格都是可以无限递增的，现在展示数据不多，颜色是17个，规格只有一个，颜色默认选中第二个，
下面贴代码，代码里有很多其他功能，和注释，不太涉密，都没去掉，
需要某一个块功能的话可以切一下，或者仅供参考，采用avalon渲染，
<link rel="stylesheet" type="text/css" href="css/base.css"> <link rel="stylesheet" type="text/css" href="css/module.css"> <style> body{font-family: "微软雅黑"; } .message1{ width: 100%; height: 150px; position: absolute; padding-top:23px; background-color: #FFFFFF; } .message1 .zuo{ width: 35%; height: 103px; margin-left: 0px; position: absolute; right: 0; } .message1 .zuo img{ width: 111px; height: 84px; padding-left: 7px; } .message1 .you{ width: 70%; height: 103px; padding-left:24px; margin-right: 0px; position: absolute; left:0; } .message1 .you p{ line-height: 28px; } .lanren{width: 100%; background-color: #777777; height: 3px;} #bar{ display: block;background:red; float: left; height: 46px;text-align: center; color: #FFF;} .bullet1{ max-height: 210px; } .shop-price{ height: 25px !important; } .shop-arithmetic{ width: 80px !important; } </style> <style> *{ margin:0; padding:0; } .clear{ content: \'\'; clear:both; overflow: hidden; } .clear:after{ zoom:1; } .box{ width:404px; margin:0 auto; height: 50px; } .box .btn{ display: inline-block; width:50px; height:50px; line-height:50px; /*border:1px solid #000;*/ cursor:pointer; } .box .btn-left{ float: left; padding-left: 11px; } } .box .btn-right{ float: right; } .box .bar{ width:300px; height:52px; float: left; position:relative; overflow: hidden; } .box .bar ul{ width:auto; list-style: none; position:absolute; left:0; top:0; height: 55px; } .box .bar li{ width:100px; text-align:center; float:left; line-height:50px; height:50px; } .licheck{ border-bottom: solid 6px red !important; } #bar{ color: black; background:white; } </style> <div ms-controller=\'buy_index6\' style="height: auto"> <div id="head" class="pr tc " style="z-index:9999;position: fixed;width: 100%;margin-top: 0px;"> <div class="headbox h50 lh49 bgcf02828"> <img class="pa left10 top15 h18 cp zi2 " src="images/back1.png" onclick="back();"/> <span class="f18 cfff">爆品商场</span> <span ms-click="myorder()" class="dib cfff pa right10 top16 h18 cp zi2 lh18 f16" > </span> </div> <div class="pr tc" style="z-index:9;position: fixed;width: 100%;top:50px;"> <div class="h35" style="z-index:;background-color: #FFFFFF;position: relative;"> <div class="zuo mt10" style="position: absolute;left: 9px;margin-top: 5px;"><img src="images/buy/22.png" style="width: 20px;margin-top: 3px;"/><label><img class=" h20" src="images/buy/k_03.png" style="margin-top: 3px"/></label></div> <div class="you" onclick="showsele()" style="position: absolute;right: 8px;line-height: 30px;font-size: 14px;"> <img id="image1" src="images/buy/icon/hu.png" style="width: 15px;"> 我的 </div> </div> </div> <div class=\'showsele\' style="display:none;right:0px;position: fixed;top:80px;height: 90px;width: 100px;text-align: center"> <div style="width: 100%;height: 45px;line-height:45px;font-size:14px;background-color: white;border: 1px solid #f5f5f5" ms-click="godingdan()">我的订单</div> <div style="width: 100%;height: 45px;line-height:45px;font-size:14px;background-color: white;border: 1px solid #f5f5f5" ms-click="goshoucang()">我的收藏</div> </div> </div> <div id=\'toptop6\'></div> <div style="overflow-y: auto;height:100%;padding-bottom:60px;-webkit-overflow-scrolling: touch;overflow-scrolling: touch;"> <!--图片轮盘--> <div id="banner" class="pr zi1 pt80"> <div class="swiper-container wp100 mb10 bullet1"> <div class="swiper-wrapper"> <div ms-repeat="lunlist" class="swiper-slide"><img onerror="this.onerror=null; this.src=\'images/buy/i.png\'" ms-src="{{el.image}}" style="width: 100%"/></div> <!-- <div class="swiper-slide"><img src="images/buy/i.png" style="width: 100%"/></div> <div class="swiper-slide"><img src="images/buy/i.png" style="width: 100%"/></div> <div class="swiper-slide"><img src="images/buy/i.png" style="width: 100%"/></div> <div class="swiper-slide"><img src="images/buy/i.png" style="width: 100%"/></div> <div class="swiper-slide"><img src="images/buy/i.png" style="width: 100%"/></div> --> <!-- <div ms-repeat=\'lunlist\' class="swiper-slide" ms-css-background-image=\'url({{el.banner_img}})\' ms-click="lunjump(el.banner_link)"><img src="images/buy/i.png" style="width: 100%"/></div> <div ms-repeat=\'lunlist\' class="swiper-slide" ms-css-background-image=\'url({{el.banner_img}})\' ms-click="lunjump(el.banner_link)"><img src="images/buy/i.png" style="width: 100%"/></div> <div ms-repeat=\'lunlist\' class="swiper-slide" ms-css-background-image=\'url({{el.banner_img}})\' ms-click="lunjump(el.banner_link)"><img src="images/buy/i.png" style="width: 100%"/></div> <div ms-repeat=\'lunlist\' class="swiper-slide" ms-css-background-image=\'url({{el.banner_img}})\' ms-click="lunjump(el.banner_link)"><img src="images/buy/i.png" style="width: 100%"/></div> --> </div> <div class="swiper-pagination"></div> </div> </div> <div style="width:100%;" > <!--<img src="images/buy/xiang_02.png" style="width: 100%;height: 310px"/>--> </div> <!-- <div style="width:100%;height: 50px;background-color: #f12c2c"> <table style="padding-left: 5px;width: 100%;padding-right: 5px;"> <tr> <td rowspan=\'3\' style="width: 15%"><div class="shop-pices" style="font-size: 17px;color: #FFFFFF">￥<b class="price" >5.2</b></div></td> <td style="font-size: 11px;line-height: 25px;color: #fca7a7;text-decoration:line-through;">原价：￥12.90</td> <td style="font-size: 13px;text-align: right;line-height: 25px;color: #FFFFFF">距离直播结束 <span>11:30:00</span></td> </tr> <tr> <td style="font-size: 11px;color: #fca7a7">已抢：4786笔</td> <td> <div class="lanren"> <div id="bar" style="width: 60%"></div> </div> </td> </tr> </table> </div>--> <div class="h60" style="background-color: #FFFFFF;position: relative;border-bottom: 1px solid #f5f5f5;"> <div class="f_zuo" style="position: absolute;left: 6px;width: 80%;top:6px"> <p style="font-size: 15px;color:black;line-height: 48px;">{{goods_name}}</p> </div> <!--<div onclick="fenxiang()" class="f_you" style="position: absolute;top:7px;right:5px;">--> <!--<p><img src="images/buy/u_03.gif" / style="width: 20px"></p>--> <!--<p>分享</p>--> <!--</div>--> </div> <div style="background-color: white;height: 65px;border-bottom: 1px solid #f5f5f5;" class="pt5"> <table style="line-height: 25px;margin-left: 10px;text-align: left;width: 96%;"> <tr style="height: 25px;"> <td valign="bottom" style="color: red;font-weight:bold;text-align: left"><span style="font-size: 21px">￥{{min_price}}</span></td> <td valign="bottom" style="color: red;font-weight:bold;text-align: left"><span style="font-size: 21px">￥{{middle_price}}</span></td> <td valign="bottom" style="color: red;font-weight:bold;text-align: left"><span style="font-size: 21px">￥{{max_price}}</span></td> <!--<td valign="bottom" class="f11" style="text-align: left;text-decoration:line-through;">￥4.2</td> <td valign="bottom" style="text-align: left;" class="f12">￥3.2</td>--> </tr> <!-- <tr style="height: 25px;"> <td valign="bottom" style="color:#929292;font-weight:bold;text-align: left;"><span>拼购价￥{{min_price}}</td> <td valign="bottom" style="color:#929292;font-weight:bold;text-align: left;"><span>拼购价￥{{middle_price}}</td> <td valign="bottom" style="color:#929292;font-weight:bold;text-align: left;"><span>拼购价￥{{max_price}}</td> </tr> --> <tr style="height: 25px;"> <td valign="bottom" style="color:#929292;font-weight:bold;text-align: left;"><span>{{max_num}}件起批</span></td> <td valign="bottom" style="color: #929292;font-weight:bold;text-align: left;"><span>{{middle_num}}件起</span></td> <td valign="bottom" style="color: #929292;font-weight:bold;text-align: left;"><span>≥ {{min_num}}件起</span></td> </tr> <!--<tr style="height: 25px;border-bottom: 2px solid #CCCCCC"> <td valign="bottom" style="color:#929292;font-weight:bold;text-align: left;"><span>快递￥0.00</span></td> <td valign="bottom" style="color: #929292;font-weight:bold;text-align: left;"><span>已售4786笔</span></td> <td valign="bottom" style="color: #929292;font-weight:bold;text-align: left;"><span>发货杭州义乌</span></td> </tr>--> </table> </div> <!-- 改过高50 --> <div style="background-color: white;height: 31px;" class="mb5 pt5"> <table style="line-height: 25px;margin-left: 10px;text-align: left;width: 96%;"> <tr style="height: 25px;border-bottom: 2px solid #CCCCCC"> <td valign="bottom"iOS8 UICollectionView横向滑动demoFragmentStatePageAdapter 缓存，重新创建活动后如何引用旧片段？ （对于前 - 横向模式）
从ViewPager嵌套RecyclerView再嵌套RecyclerView看安卓事件分发机制