uni-app小程序商品列表1

“uni-app小程序的商品列表页中，综合、销量、价格、筛选，这四个按钮是用什么布局实现的，如何实现点击不同按钮显示不同的商品列表？”

在uni-app小程序中，商品列表页中的综合、销量、价格和筛选这四个按钮可以使用flex布局实现。可以将这四个按钮放在一个水平的flex容器中，每个按钮使用flex布局的子项。

如何使用flex布局实现这四个按钮，并根据点击的按钮显示不同的商品列表：

<template>
  <view class="button-container">
    <view class="button-item" :class="{ 'active': activeButton === '综合' }" @click="showProductList('综合')">综合</view>
    <view class="button-item" :class="{ 'active': activeButton === '销量' }" @click="showProductList('销量')">销量</view>
    <view class="button-item" :class="{ 'active': activeButton === '价格' }" @click="showProductList('价格')">价格</view>
    <view class="button-item" :class="{ 'active': activeButton === '筛选' }" @click="showProductList('筛选')">筛选</view>
  </view>
  
  <view class="product-list">
    <!-- 根据activeButton的值显示对应的商品列表 -->
    <view v-if="activeButton === '综合'">综合商品列表</view>
    <view v-if="activeButton === '销量'">销量商品列表</view>
    <view v-if="activeButton === '价格'">价格商品列表</view>
    <view v-if="activeButton === '筛选'">筛选商品列表</view>
  </view>
</template>

<style>
.button-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.button-item {
  flex: 1;
  text-align: center;
  padding: 10rpx;
  background-color: #f2f2f2;
  color: #333333;
}

.active {
  background-color: #999999;
  color: #ffffff;
}

.product-list {
  margin-top: 20rpx;
}
</style>

<script>
export default {
  data() {
    return {
      activeButton: '综合'
    }
  },
  methods: {
    showProductList(button) {
      this.activeButton = button;
    }
  }
}
</script>

在这个示例中，我们使用了一个名为button-container的容器来包裹四个按钮，并使用flex布局来实现水平排列。

每个按钮使用button-item类进行样式设置，通过:class动态绑定active类来实现点击按钮时的样式变化。

在showProductList方法中，根据点击的按钮来更新activeButton的值，从而实现显示不同的商品列表。

在商品列表部分，我们使用v-if指令来根据activeButton的值显示对应的商品列表。当activeButton的值为综合、销量、价格或筛选时，对应的商品列表会显示出来。

这样，当点击不同的按钮时，会更新activeButton的值，从而显示对应的商品列表。