<view> <view class="car_item_wrap" wx:for="{{carArray}}" wx:if="{{item.carShow}}"> <view class="car_image_wrap"> <image src="{{item.carImage}}" class="car_item_image"></image> </view> <view class="car_item_title"> <view>{{item.carTitle}}</view> </view> <view class="car_item_bot"> <text class="car_item_price">{{item.carPrice}}</text> <span class="car_item_del" data-alpha-beta="{{index}}" bindtap="carRemove"></span> <span class="car_item_operate"> <span class="car_item_reduce car_item_btn" data-alpha-beta="{{index}}" bindtap="carReduce">-</span> <span class="car_item_num" data-alpha-beta="{{index}}" bindtap="carRemove">{{item.carNum}}</span> <span class="car_item_add car_item_btn" data-alpha-beta="{{index}}" bindtap="carAdd">+</span> </span> </view> </view> </view> <navigator url="../index/index"> <view class="car_list_bot"> 还差<text class="red">¥100.00</text>元包邮,前往凑单 <span class="arrow_wrap"></span> </view> </navigator> <view class="car_bot"> <view class="car_bot_wrap"> 总价 <span class="car_order_confirm" bindtap="toPay">下单</span> <span class="car_total_money">¥579.00</span> </view> </view> |
.car_item_wrap { position: relative; height: 100px; background-color: #FFF; padding-left: 100px; border-bottom: 1px solid #E7E7EB; } .car_image_wrap { position: absolute; top: 10px; left: 10px; } .car_item_image { width: 80px; height: 80px; } .car_item_title { padding: 10px 10px 10px 0; font-size: 14px; } .car_item_bot { padding: 0 10px 0 0; height: 28px; line-height: 28px; } .car_item_price { color: #ff0000; font-size: 14px; } .car_item_operate { display: inline-block; float: right; } .car_item_btn { display: inline-block; width: 26px; height: 26px; text-align: center; line-height: 28px; border: 1px solid #B2B2B2; color: #929292; } .car_item_num { display: inline-block; width: 40px; height: 26px; text-align: center; line-height: 28px; border-top: 1px solid #B2B2B2; border-bottom: 1px solid #B2B2B2; font-size: 14px; position: relative; color: #929292; } .car_item_del { display: inline-block; width: 28px; height: 28px; background-image: url(../../image/shanchu.png); background-size: 24px; background-repeat: no-repeat; background-position: center; float: right; margin-left: 15px; } .car_bot { position: fixed; width: 100%; background-color: #FFF; bottom: 0; border-bottom: 1px solid #E5E5E5; font-size: 14px; } .car_bot_wrap { padding: 10px; height: 30px; line-height: 30px; } .car_order_confirm { display: inline-block; float: right; background-color: #ff7e3a; color: #FFF; border-radius: 3px; width: 80px; text-align: center; } .car_total_money { display: inline-block; color: #FF0000; margin-left: 5px; } .car_list_bot { background-color: #FFF; padding: 10px; font-size: 14px; height: 25px; line-height: 25px; padding-right: 50px; text-align: right; position: relative; color: #929292; } .arrow_wrap { position: absolute; width: 50px; height: 45px; right: 0; top: 0; background-image: url(../../image/icon-arrow.png); background-repeat: no-repeat; background-size: 16px; background-position: 17px 14px; } .red { color: #FF0000; } |
Page({ data: { carArray: [ { carImage: '../../image/zhutu.jpg', carTitle: '木村耀司登山旅行大学生户外情侣双肩背包外带小背包', carPrice: '¥192.00', carNum: 1, carShow: true }, { carImage: '../../image/zhutu.jpg', carTitle: '木村耀司登山旅行大学生户外情侣双肩背包外带小背包', carPrice: '¥193.00', carNum: 1, carShow: true }, { carImage: '../../image/zhutu.jpg', carTitle: '木村耀司登山旅行大学生户外情侣双肩背包外带小背包', carPrice: '¥194.00', carNum: 1, carShow: true } ] }, carAdd: function(event){ var that = this; var index = event.target.dataset.alphaBeta; var con = that.data.carArray[index].carNum + 1; var key = 'carArray['+index+'].carNum'; var obj = {}; obj[key] = con; this.setData(obj); }, carReduce: function(event){ var that = this; var index = event.target.dataset.alphaBeta; var con = that.data.carArray[index].carNum; var key = 'carArray['+index+'].carNum'; var obj = {}; if(con <= 1){ obj[key] = 1; that.setData(obj); } else { con--; obj[key] = con; that.setData(obj); } }, carRemove: function(event){ var that = this; var index = event.target.dataset.alphaBeta; var key = 'carArray['+index+'].carShow'; var obj = {}; obj[key] = false; this.setData(obj); }, toPay: function(){ wx.navigateTo({ url: '../pay/pay' }) } }) |
模板简介:该模板名称为【微信小程序购物车下单商品列表页设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。