微信小程序学习（二）

                     WXML 与 WXSS 基础https://blog.csdn.net/qq_38060125/article/details/149577716

📝 练习任务

1. 创建一个商品列表页面，使用 wx:for 渲染商品名称与价格
2. 添加一个“加入购物车”按钮，点击后将商品添加到 data 中的购物车数组
3. 实现点击删除商品功能
4. 使用 wx:if 控制当购物车为空时显示“购物车为空”

🔁 拓展建议

• 尝试使用 hidden 属性实现与 wx:if 类似的显示控制，理解两者区别（wx:if 不渲染 DOM，hidden 通过样式控制）
• 使用 setData 修改数据，观察页面是否自动更新
• 尝试使用 wx:for 嵌套结构实现更复杂的页面布局（如分类商品列表）

做法：

1.修改页面：

主要是保留了原本的，只是替换了文字和绑定的函数。然后增加了购物车。暂且不做美化。

<view wx:for="{{cart}}" wx:key="id" wx:for-index="idx"><view><text>{{item.name}} - {{item.price}}元</text><button bind:tap="addItem" data-index="{{idx}}">加入购物车</button></view>
</view><view><text>购物车</text><!-- 使用 wx:if 判断购物车是否为空 --><view wx:if="{{shoppingcart.length === 0}}"><text>购物车为空</text></view><view wx:else><view wx:for="{{shoppingcart}}" wx:key="id" wx:for-index="idx"><text>{{item.name}} - {{item.price}}元</text><button bind:tap="removeItem" 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 属性 -->
<view><text hidden="{{shoppingcart.length > 0}}">购物车为空</text><view hidden="{{shoppingcart.length === 0}}"><view wx:for="{{shoppingcart}}" wx:key="id" wx:for-index="idx"><text>{{item.name}} - ￥{{item.price}}</text><button bindtap="removeItem" data-index="{{idx}}">移除</button></view></view>
</view>