uni-app滑动切换页面

<template>
  <view class="big">
    <view class="trade">
			<block v-for="(item, index) in tabBars" :key="item.id">
				<view class="texts" :class="curr == index ? 'active' : ''" :data-index="index" @click="setCurr">
					{{item.name}}
				</view>
			</block>
    </view>
    <swiper style="height: 100vh" :current="curr" @change="setCurr">
			<block v-for="item in tabBars" :key="item.id">
				 <swiper-item>
					<scroll-view> {{item.name}} </scroll-view>
				</swiper-item>
			</block>
    </swiper>
  </view>
</template>
<script>
export default {
  data() {
    return {
      curr: 0,
			tabBars: [
        { name: "关注", id: "guanzhu" },
        { name: "推荐", id: "tuijian" },
        { name: "体育", id: "tiyu" },
        { name: "热点", id: "redian" },
        { name: "财经", id: "caijing" },
        { name: "娱乐", id: "yule" },
      ],
    };
  },
  methods: {
    setCurr(e) {
			console.log(1111);
			// console.log(e);
      // console.log(e.detail.current, e.currentTarget.dataset.index);
      let thisCurr = e.detail.current || e.currentTarget.dataset.index || 0;
      // console.log(thisCurr)
      this.curr = thisCurr;
    },
  },
};
// https://www.cnblogs.com/zhoulifeng/p/11613430.html
</script>

<style lang='less' scoped>
.trade {
  width: 100%;
  color: #007aff;
  overflow: auto;
	// display: ;
}
.trade view {
	padding: 20rpx;
	// width: 30rpx;
  text-align: center;
  // padding-left: 25upx;
  // width: 30%;
  float: left;
}
.trade .texts.active {
  border-bottom: 8upx solid #f0ad4e;
}
</style>

参考文章: https://blog.csdn.net/lliter/article/details/103694547?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2.no_search_link