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

미니 프로그램 장바구니에 담긴 모든 항목을 선택하는 논리 과정을 공유하고 싶습니다. 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();
},

• 이 코드도 all-selected 상태를 먼저 처리한 후, 연관된 상태를 처리합니다.

• all을 선택하고 체크 해제하면 제품 정보의 모든 버튼이 false로 변경되고 allclick이 삭제됩니다. 직접 배열.

• 모두 선택되었으면 상품정보에 있는 버튼을 모두 true로 변경하고 먼저 클리어한 후 다시 누른 후 값을 지정합니다.

이 몇 단계를 거치면 모두 선택하는 논리가 모두 해결되었습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 다른 관련 항목에 주목하세요. PHP 중국어 웹사이트의 기사!

추천 도서:

WeChat 미니 프로그램 개발을 위해 switchTab을 사용하는 방법

WeChat 미니 프로그램 개발을 위한 코드 작성 방법

위 내용은 WeChat 미니 프로그램 개발에서 전자상거래 장바구니 로직을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!