집 >위챗 애플릿 >미니 프로그램 개발 >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 중국어 웹사이트의 기타 관련 기사를 참조하세요!