微信小程序中实现列表样式切换（统一区域的不同表现形式）

在微信小程序中，实现菜品列表的样式切换默认是样式一，点击切换样式，实现样式二
以下是一个示例代码，演示在微信小程序中如何实现菜品列表的样式切换：

在项目中我是列举了菜单形式的切换，<view></view>中的内容可更改替换：

在 wxml 文件中：

<view class="container">
  <!-- 样式一：左边店家图片，右边店家信息 -->
  <view class="style1" wx:if="{{currentStyle === 'style1'}}">
    <image src="{{shop.imgUrl}}" class="shop-image"></image>
    <view class="shop-info">
      <view class="shop-name">{{shop.name}}</view>
      <view class="shop-address">{{shop.address}}</view>
    </view>
  </view>
  <!-- 样式二：下方菜品样式 -->
  <view class="style2" wx:else>
    <view class="shop-name">{{shop.name}}</view>
    <view class="shop-address">{{shop.address}}</view>
    <view class="menu-title">菜单</view>
    <block wx:for="{{menu}}" wx:key="index">
      <view class="menu-item">
        <image src="{{item.imgUrl}}" class="dish-image"></image>
        <view class="dish-name">{{item.name}}</view>
        <view class="dish-price">{{item.price}}</view>
      </view>
    </block>
  </view>

  <!-- 切换按钮 -->
  <view class="toggle-btn" bindtap="toggleStyle">
    {{currentStyle === 'style1' ? '切换到样式二' : '切换到样式一'}}
  </view>
</view>

在 wxss 文件中：

.container {
  margin: 10px;
  padding: 10px;
  border: 1px solid #ccc;
}
.style1 {
  display: flex;
  align-items: center;
}

.shop-image {
  width: 100px;
  height: 100px;
  margin-right: 10px;
}

.shop-info {
  flex: 1;
}

.shop-name {
  font-size: 16px;
  font-weight: bold;
}

.shop-address {
  font-size: 14px;
  color: #999;
  margin-top: 5px;
}

.style2 {
  margin-top: 10px;
}

.menu-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.menu-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.dish-image {
  width: 80px;
  height: 80px;
  margin-right: 10px;
}

.dish-name {
  flex: 1;
  font-size: 14px;
}

.dish-price {
  font-size: 14px;
  color: #ff5722;
}

.toggle-btn {
  background-color: #4caf50;
  color: #fff;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  margin-top: 10px;
  cursor: pointer;
}

在 js 文件中：

Page({
  data: {
    currentStyle: 'style1',  // 当前样式，默认为样式一
    shop: {
      imgUrl: '店铺图片地址',
      name: '店铺名称',
      address: '店铺地址',
    },
    menu: [
      { imgUrl: '菜品1图片地址', name: '菜品1', price: '10元' },
      { imgUrl: '菜品2图片地址', name: '菜品2', price: '20元' },
      { imgUrl: '菜品3图片地址', name: '菜品3', price: '30元' },
      // 其他菜品数据...
    ],
  },
  // 切换样式按钮点击事件
  toggleStyle: function() {
    const { currentStyle } = this.data;
    const newStyle = currentStyle === 'style1' ? 'style2' : 'style1';
    this.setData({
      currentStyle: newStyle
    });
  }
});

在这个示例中，假设样式一是左边店家图片，右边店家信息的样式，样式二是下方菜品的样式。 shop 对象存储了店家的图片地址、名称和地址。 menu 数组存储了菜品的图片地址、名称和价格。

点击切换按钮时，会调用 toggleStyle 函数，更改 currentStyle 的值，从而改变页面的样式。

可根据实际需求修改示例代码中的图片地址和样式。