vant实现购物车功能

做一些电商或者支付页面，肯定少不了购物车功能，一方面正反选，另一方面动态价格，全选之后再去加减商品数量（这里必须考虑 里面有很多蛋疼的问题）猛的一想，感觉思路很清晰，但是，真正动起手来就各种bug出来了，说实话 搞这个购物车，浪费我整整一下午的时间，当我回过头捋一遍，其实，半小时就能完事。就是因为全选的时候 我又去更改商品数量，然后调用算价格的方法导致浪费了太多时间，话不多少，还是先上图吧 

先看看需求文档吧

代码格式不是很整齐 编辑器没有调整  凑合看吧

.van-submit-bar{
 bottom:49px;
 padding-left:20px;
 
}
.shopContent{
 margin-top:18px;
 padding-bottom:90px;
}
.shopping{
 text-align: center;
 padding-top:99px;
 img{
 width:96px;height:96px;
 margin-bottom: 25px;
 } 
}
li{
 padding:0 15px;
 background:#ffffff;
 margin-bottom:10px;
 position: relative;
 height:103px;
 .shopmain{
 display: flex;
 padding:10px 8px 10px 10px;
 position: relative;
 .shops{
 display: flex;
 .shopImg{
 width:103px;height:83px;
 margin:0 7px 0 11px;
 img{
  width:100%;height:100%;
 }
 }
 .shopsright{
 width:185px;
 display: flex;
 flex-direction:column;
 justify-content: space-between;
 h4{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
 }
 .shoprightbot{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 190px;
  span{
  font-size:17px;
  color:#F74022;
  }
 }
 }
 }
 .van-checkbox__icon--checked .van-icon{
 background:red !important;
 }
 }
 button{
 width:24px;height:26px;
 font-size:20px;
 background:#F74022;
 color:#ffffff;
 border:none;
 }
 input{
 width:48px;
 }
} 
.shopradd{
 width: 98px;
 display: flex;
 .van-field__control{
 text-align: center !important;
 }
}
.van-cell{
 padding: 0;
 line-height: 26px
}
.van-field__control{
 height: 26px;
}

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。