微信小程序学习（二） - 实践

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.修改页面：

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

  
    {{item.name}} - {{item.price}}元
    加入购物车
  


  购物车
  
  
    购物车为空
  
  
    
      {{item.name}} - {{item.price}}元
      移除购物车
    
  

效果如图：

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：