uniapp滚动页面切换tab标签

可以使用uni-swiper组件实现滚动页面切换tab标签，具体代码如下：

<template>
<view>
<uni-swiper :current="current" @change="handleChange">
<uni-swiper-item v-for="(item, index) in tabs" :key="index">
<view>
<text>{{ item }}</text>
</view>
</uni-swiper-item>
</uni-swiper>
</view>
</template>

<script>
export default {
data() {
return {
current: 0,
tabs: ['标签1', '标签2', '标签3']
}
},
methods: {
handleChange(e) {
this.current = e.detail.current
}
}
}
</script>

相关问题

uniapp切换tab页面回到顶部

在uniapp中，要实现切换tab页面回到顶部的效果，可以使用以下步骤：

1. 在需要回到顶部的页面，可以在页面的onShow生命周期函数中添加代码：

   onShow() {
     uni.pageScrollTo({
       scrollTop: 0, // 设置滚动高度为0，即回到顶部
       duration: 0 // 设置滚动动画的时间为0，实现瞬间回到顶部
     })
   }

2. 如果tab页面比较多，可以考虑封装一个公共的mixin（混入），在每个页面引入该混入，统一实现回到顶部的效果。
首先，在src目录下创建一个名为"mixins"的文件夹，然后在该文件夹下创建一个名为"backToTop.js"的文件，文件内容如下：

   export default {
     onShow() {
       uni.pageScrollTo({
         scrollTop: 0,
         duration: 0
       })
     }
   }

3. 在需要回到顶部的页面中引入该混入，例如在home.vue页面中引入：

   import backToTopMixin from '@/mixins/backToTop.js'
   export default {
     mixins: [backToTopMixin],
     // 其他页面代码
   }

通过以上步骤，每次切换回到该页面，都会自动回到页面顶部，实现了uniapp切换tab页面回到顶部的效果。

uniapp 写一个tab切换

好的，以下是一个简单的uniapp tab切换示例：

1. 创建三个页面，分别为 A 页面、B 页面、C 页面。

2. 在 App.vue 中创建一个 tab 组件：

<template>
  <view class="container">
    <tab-bar :active.sync="activeIndex" :list="tabList"></tab-bar>
    <router-view></router-view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: 0,
        tabList: [
          {
            text: 'A',
            icon: 'home-o'
          },
          {
            text: 'B',
            icon: 'search'
          },
          {
            text: 'C',
            icon: 'setting-o'
          }
        ]
      }
    }
  }
</script>

3. 在 tab 组件中引入自定义组件 TabBar.vue：

<template>
  <view class="tab-bar">
    <view v-for="(item, index) in list" :key="index" class="tab-item" @click="handleClick(index)">
      <icon :type="item.icon" :size="24" :color="active === index ? '#007aff' : '#ccc'"></icon>
      <text :style="{ color: active === index ? '#007aff' : '#ccc' }">{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      active: {
        type: Number,
        default: 0
      },
      list: {
        type: Array,
        default: () => []
      }
    },
    methods: {
      handleClick(index) {
        this.$emit('update:active', index)
      }
    }
  }
</script>

<style>
  .tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    box-shadow: 0 -1px 5px rgba(0,0,0,0.2);
  }

  .tab-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
  }
</style>

4. 在路由配置文件中设置三个路由：

export default [
  {
    path: '/',
    redirect: '/a'
  },
  {
    path: '/a',
    name: 'A',
    component: () => import('@/pages/A.vue')
  },
  {
    path: '/b',
    name: 'B',
    component: () => import('@/pages/B.vue')
  },
  {
    path: '/c',
    name: 'C',
    component: () => import('@/pages/C.vue')
  }
]

5. 在 A.vue、B.vue、C.vue 中分别添加页面内容。

6. 完成以上步骤，现在可以在 App.vue 中通过修改 activeIndex 来实现页面的切换了。