vue+vant+axios,实现购物车功能;

购物实现:

1. 商品单件选择,

2.单件商品数量增减操作,

3. 单件商品的删除操作;

4. 商品全选/取消全选功能;

style:使用vant:

改造:

/*购物车*/
.cars-header .passport-user {line-height: 32px;}
.carts  .van-card__footer {/*right: auto;*/top: 48px;position: absolute;}
.carts  .van-card {padding: 5px 12px 5px 115px;background: #fff;}
.carts  .van-cell-group {padding: 10px 0 45px; }
.carts .van-swipe-cell__right {background: #cc292b;line-height: 146px;color: #fff;width: 68px;font-size: 18px;text-align: center;}
.carts .van-checkbox {margin-left: 10px; }
.carts .carts-checked{float:left;color: #0a0a0a;display: block;position: relative; line-height: 100px;z-index: 666;}
.carts-select-botm{width:100%;}
.carts-botm-total{position: relative;right: -53px;top: -45px;font-size: 12px; margin-top: 12px;text-align: right;display: none}
.carts .skuchoose{position: absolute;top: -19px;width: 200px}
.carts .skuitem{color: #999;margin-bottom: 3px;}
.cart-no-da

你可能感兴趣的:(vue,技巧)