WeChat 미니 프로그램 개발에서 전자상거래 장바구니 로직을 구현하는 방법-미니 프로그램 개발-php.cn

WeChat 미니 프로그램 개발에서 전자상거래 장바구니 로직을 구현하는 방법

php中世界最好的语言

풀어 주다： 2018-06-05 11:51:20

원래의

2818명이 탐색했습니다.

미니 프로그램 장바구니에 담긴 모든 항목을 선택하는 논리 과정을 공유하고 싶습니다. UI 디자인이 아무리 못생겨도 개발자는 엄격해야 한다고 가르쳐준 언니에게 감사드립니다. , 필요한 논리가 있어야 합니다.

먼저 해야할 일은 사용자가 세 번째 상품을 클릭하면 전체선택 버튼이 자동으로 선택되거나, 전체선택 후 한 상품이 선택되지 않은 이상 모두선택이 되는 것입니다. 버튼도 변경되어야 합니다. 먼저 코드를 보여드리겠습니다.

페이지가 로드될 때마다 렌더링해야 하는 일부 데이터를 정의해야 합니다.

data: {
likeList: [],
carts:[], // 购物车列表
hasList:false, // 列表是否有数据
//totalPrice:0, // 总价，初始为0
selectAllStatus:false, // 全选状态，默认全选,
goodsNums:0,
allclick:[]
}
每件商品单个选中的的逻辑处理
selectList(e) {
  const index = e.currentTarget.dataset.index;// 获取每一个点击的购物车ID  let carts = this.data.carts,
  selected = carts[index].select,
  all = this.data.allclick;
  carts[index].select = !selected;
carts[index].select == true ? all.push(index):all.splice(index,1);
all.length == carts.length ?
this.setData({
  selectAllStatus: true}):this.setData({
  selectAllStatus: false});
  this.getTotalPrice();
},

로그인 후 복사

위 코드에서 가장 먼저 해야 할 일은 다음과 같습니다. 단일 선택 페이지 렌더링 효과. 판단 부분의 코드는 선택 로직을 처리하는 가장 중요한 단계입니다. 여기에서 제가 데이터에 allclick의 빈 배열을 정의한 다음 다음과 같은 논리를 정의했다는 사실을 눈치채셨을 것입니다. 버튼이 선택되면 해당 항목의 모서리 표시를 꺼내서 새 arr에 넣습니다. 왜냐하면 제가 이전에 이미 정산 로직을 완료했기 때문에 아무렇지도 않게 데이터를 배열에 밀어 넣었지만 실제로는 제품에 해당하는 더 중요한 데이터로 처리할 수 있습니다.
버튼을 선택하지 않으면 이 항목의 첨자에 해당하는 데이터가 새 arr에서 찾아 제거됩니다
위의 2단계 과정을 완료한 후 버튼을 누를 때마다 상태가 변경되면 arr의 길이와 카트 길이가 결정됩니다.
이건 제가 가공한거고 재활용도 가능하고 방법도 다양해서 연락 한번도 안해본 친구들 참고용으로 올려봅니다~

data: {
likeList: [],
carts:[], // 购物车列表
hasList:false, // 列表是否有数据
//totalPrice:0, // 总价，初始为0
selectAllStatus:false, // 全选状态，默认全选,
goodsNums:0,
allclick:[]
}
每件商品单个选中的的逻辑处理
selectList(e) {
  const index = e.currentTarget.dataset.index;// 获取每一个点击的购物车ID  let carts = this.data.carts,
  selected = carts[index].select,
  all = this.data.allclick;
  carts[index].select = !selected;
carts[index].select == true ? all.push(index):all.splice(index,1);
all.length == carts.length ?
this.setData({
  selectAllStatus: true}):this.setData({
  selectAllStatus: false});
  this.getTotalPrice();
},

로그인 후 복사