uniapp点击选项卡切换➕在每个分类选项卡下加入图文并排内容

如果你想实现在每个分类选项卡下加入图文并排内容的功能，可以使用uniapp提供的grid组件和swiper组件结合起来，来实现这个需求。

首先，你需要在页面中引入tabbar组件、swiper组件和grid组件：

<template>
  <view>
    <tabbar :current="current" @change="tabChange">
      <tabbar-item title="选项卡1"></tabbar-item>
      <tabbar-item title="选项卡2"></tabbar-item>
      <tabbar-item title="选项卡3"></tabbar-item>
    </tabbar>
    <swiper :current="current" @change="swiperChange">
      <swiper-item>
        <grid :list="list1" />
      </swiper-item>
      <swiper-item>
        <grid :list="list2" />
      </swiper-item>
      <swiper-item>
        <grid :list="list3" />
      </swiper-item>
    </swiper>
  </view>
</template>

在上面的代码中，我们创建了一个tabbar组件和一个swiper组件，分别用来实现选项卡和对应内容的切换。其中，swiper组件的每个swiper-item元素都包含一个grid组件，用来显示对应选项卡的图文并排内容。

接下来，你需要在页面的<script>标签中添加对应的逻辑代码，用来实现选项卡和内容的切换：

<script>
export default {
  data() {
    return {
      current: 0,
      list1: [
        { icon: "/static/img1.png", text: "图文1" },
        { icon: "/static/img2.png", text: "图文2" },
        { icon: "/static/img3.png", text: "图文3" }
      ],
      list2: [
        { icon: "/static/img4.png", text: "图文4" },
        { icon: "/static/img5.png", text: "图文5" },
        { icon: "/static/img6.png", text: "图文6" }
      ],
      list3: [
        { icon: "/static/img7.png", text: "图文7" },
        { icon: "/static/img8.png", text: "图文8" },
        { icon: "/static/img9.png", text: "图文9" }
      ]
    }
  },
  methods: {
    tabChange(e) {
      this.current = e.index
    },
    swiperChange(e) {
      this.current = e.current
    }
  }
}
</script>

在上面的代码中，我们定义了一个current变量，用来记录当前选中的选项卡的索引值。然后，我们在tabChange方法和swiperChange方法中分别监听tabbar和swiper的切换事件，通过修改current变量的值来实现选项卡和内容的切换。同时，我们还定义了三个列表list1、list2和list3，分别对应于每个选项卡下的图文并排内容。

最后，我们需要在grid组件中引用这些列表，用来显示图文并排内容：

<template>
  <view>
    <tabbar :current="current" @change="tabChange">
      <tabbar-item title="选项卡1"></tabbar-item>
      <tabbar-item title="选项卡2"></tabbar-item>
      <tabbar-item title="选项卡3"></tabbar-item>
    </tabbar>
    <swiper :current="current" @change="swiperChange">
      <swiper-item>
        <grid :list="list1">
          <block v-for="(item, index) in list1">
            <view class="grid-item">
              <image :src="item.icon" class="grid-icon"></image>
              <text class="grid-text">{{ item.text }}</text>
            </view>
          </block>
        </grid>
      </swiper-item>
      <swiper-item>
        <grid :list="list2">
          <block v-for="(item, index) in list2">
            <view class="grid-item">
              <image :src="item.icon" class="grid-icon"></image>
              <text class="grid-text">{{ item.text }}</text>
            </view>
          </block>
        </grid>
      </swiper-item>
      <swiper-item>
        <grid :list="list3">
          <block v-for="(item, index) in list3">
            <view class="grid-item">
              <image :src="item.icon" class="grid-icon"></image>
              <text class="grid-text">{{ item.text }}</text>
            </view>
          </block>
        </grid>
      </swiper-item>
    </swiper>
  </view>
</template>

在上面的代码中，我们使用了`<block>`标签来遍历每个列表中的元素，然后在每个元素中使用`<image>`标签和`<text>`标签来显示图文并排内容。同时，我们还为`<image>`标签和`<text>`标签添加了一些样式，用来设置图标和文字的大小和位置，具体样式可以根据实际需求进行调整。

这样，你就可以通过uniapp提供的tabbar组件、swiper组件和grid组件来实现点击选项卡切换加上在每个分类选项卡下加入图文并排内容的功能了。