影院网站建设主管,竞价推广论坛,国际欧美专线,wordpress主题图片消失WXML 与 WXSS 基础https://blog.csdn.net/qq_38060125/article/details/149577716
#x1f4dd; 练习任务
创建一个商品列表页面#xff0c;使用 wx:for 渲染商品名称与价格添加一个“加入购物车”按钮#xff0c;点击后将商品添加到 data 中的购物车数组实现点击删除商品… WXML 与 WXSS 基础https://blog.csdn.net/qq_38060125/article/details/149577716 练习任务
创建一个商品列表页面使用 wx:for 渲染商品名称与价格添加一个“加入购物车”按钮点击后将商品添加到 data 中的购物车数组实现点击删除商品功能使用 wx:if 控制当购物车为空时显示“购物车为空” 拓展建议
尝试使用 hidden 属性实现与 wx:if 类似的显示控制理解两者区别wx:if 不渲染 DOMhidden 通过样式控制使用 setData 修改数据观察页面是否自动更新尝试使用 wx:for 嵌套结构实现更复杂的页面布局如分类商品列表
做法
1.修改页面
主要是保留了原本的只是替换了文字和绑定的函数。然后增加了购物车。暂且不做美化。
view wx:for{{cart}} wx:keyid wx:for-indexidxviewtext{{item.name}} - {{item.price}}元/textbutton bind:tapaddItem data-index{{idx}}加入购物车/button/view
/viewviewtext购物车/text!-- 使用 wx:if 判断购物车是否为空 --view wx:if{{shoppingcart.length 0}}text购物车为空/text/viewview wx:elseview wx:for{{shoppingcart}} wx:keyid wx:for-indexidxtext{{item.name}} - {{item.price}}元/textbutton bind:tapremoveItem data-index{{idx}}移除购物车/button/view/view
/view
效果如图 2.修改逻辑部分
Page({data: {cart: [{ id: 1, name: 奥特曼, price: 99 },{ id: 2, name: 铠甲勇士, price: 50 },{ id: 3, name: 假面骑士, price: 44 }],shoppingcart:[]},removeItem(e) {const index e.currentTarget.dataset.index; // 获取点击商品的索引const newShoppingCart this.data.shoppingcart.filter((_, i) i ! index); // 根据索引过滤商品this.setData({ shoppingcart: newShoppingCart }); // 更新购物车数据console.log(移除后的购物车:, newShoppingCart);},addItem(e){const index e.currentTarget.dataset.index; // 获取当前点击的商品索引const selectedItem this.data.cart[index]; // 根据索引取出商品const shoppingcart this.data.shoppingcart;shoppingcart.push(selectedItem); this.setData({shoppingcart // 更新购物车数据});console.log(商品已加入购物车:, selectedItem);}
})效果 可以正常的增加和删除。
拓展
使用 hidden 替代 wx:if 控制购物车状态显示
原理对比
wx:if 元素被销毁和重新渲染。性能更高适用于页面内容切换不频繁的场景。 hidden 元素通过样式 display: none 隐藏但不会被销毁。性能更差但适用于页面内容切换频繁的场景。
使用 hidden 替代 wx:if
!-- 使用 hidden 属性 --
viewtext hidden{{shoppingcart.length 0}}购物车为空/textview hidden{{shoppingcart.length 0}}view wx:for{{shoppingcart}} wx:keyid wx:for-indexidxtext{{item.name}} - {{item.price}}/textbutton bindtapremoveItem data-index{{idx}}移除/button/view/view
/view
