uniapp底部导航栏点击

在uni-app中，底部导航栏的点击可以通过以下步骤实现：

1. 在页面的`<template>`标签中添加底部导航栏组件，例如：

<template>
  <view>
    <text>这是首页</text>
  </view>
  <view>
    <text>这是分类页</text>
  </view>
  <view>
    <text>这是购物车页</text>
  </view>
  <view>
    <text>这是我的页</text>
  </view>
  <tabbar
    :list="tabList"
    @click="onTabClick"
  ></tabbar>
</template>

2. 在页面的`<script>`标签中定义底部导航栏的选项列表，例如：

export default {
  data() {
    return {
      tabList: [
        {
          iconPath: "/static/home.png",
          selectedIconPath: "/static/home-selected.png",
          text: "首页",
        },
        {
          iconPath: "/static/category.png",
          selectedIconPath: "/static/category-selected.png",
          text: "分类",
        },
        {
          iconPath: "/static/cart.png",
          selectedIconPath: "/static/cart-selected.png",
          text: "购物车",
        },
        {
          iconPath: "/static/mine.png",
          selectedIconPath: "/static/mine-selected.png",
          text: "我的",
        },
      ],
    };
  },
  methods: {
    onTabClick(e) {
      const index = e.index; // 获取点击的选项的索引值
      console.log("点击了第" + (index + 1) + "个选项");
      // 根据索引值切换页面
      uni.switchTab({
        url: "/" + this.tabList[index].text.toLowerCase(),
      });
    },
  },
};

3. 在`onTabClick`方法中，可以获取点击的选项的索引值，根据索引值切换页面。这里使用了`uni.switchTab`方法，可以切换到底部导航栏所对应的页面。