uniapp 滑動切換

說明：本案例的樣式基於colorui元件庫 感興趣的小夥伴可以看下教程 colorui元件庫開發文件或者csdn的文件，順便再分享下 colorui的群資源

最近專案中需要用到滑動切換的效果，自己懶得寫就去網上找了下，發現網上的也不靠譜，不是樣式錯亂就是其他bug，反正到你的電腦上就是各種bug般的存在，剛好趁著過年的時間把這個完整的效果給小夥伴們陳列下我的gitee

效果圖

元件封裝

• swiper-tab.vue

• html

<template>
	<view class="">
	  <scroll-view scroll-x class="nav bg-white" style="scrollStyle">
	    <view class="flex text-center">
	      <view class="cu-item flex-sub" :style="scrollItemStyle" @tap="tabtap(index)" :class="tabIndex==index?'text-blue cur':''" v-for="(tab,index) in tabBars" :key="tab.id">{{tab.name}} {{tab.num?tab.num:''}}</view></view>
	  </scroll-view>
	</view>
</template>

• css

<style>
	.uni-swiper-tab {
		border-bottom:1upx solid #EEEEEE;
	}
	.swiper-tab-list {
		color:#969696;
		font-weight:bold;
	}
	.uni-tab-bar .active {
		color:#343434;
	}
	.active .swiper-tab-line {
		border-bottom:6upx solid #FEDE33;
		width:70upx;
		margin:auto;
		border-top:6upx solid #FEDE33;
		border-radius:20upx;
	}

</style>

• js

export default {
props: {
tabBars: Array,
tabIndex: Number,
scrollStyle: {
type: String,
default: ""
},
scrollItemStyle: {
type: String,
default: ""
}
},
methods: {
tabtap(index) {
//點選tab時把自己的index傳給父元件index.vue
this.$emit('tabtap', index);
},
}
}

頁面中使用

• 引用元件

<script>import swiperTab from "../../components/swiper-tab/swiper-tab.vue"
export default {
    components:
    {
      swiperTab
    },
    onLoad() {
      uni.getSystemInfo({
        success: (res) = >{
          let height = res.windowHeight - uni.upx2px(100) 
          this.swiperheight = height;
        }
      })
    },
    data() {
      return {
        tabIndex: 0,
        // 選中的
        tabBars: [{
          name: "關注",
          id: "guanzhu"
        },
        {
          name: "推薦",
          id: "tuijian"
        },
        {
          name: "體育",
          id: "tiyu"
        },
        {
          name: "熱點",
          id: "redian"
        },
        {
          name: "財經",
          id: "caijing"
        },
        {
          name: "娛樂",
          id: "yule"
        },
        ],
        swiperheight: 500,
        //高度
        newslist: [{
          list: [{
            username: "暱稱",
            title: "我是標題",
          },
          {
            username: "暱稱",
            title: "我是標題",
          },
          {
            username: "暱稱",
            title: "我是標題",
          },
          {
            username: "暱稱",
            title: "我是標題",
          },
          {
            username: "暱稱",
            title: "我是標題",
          },
          {
            username: "暱稱",
            title: "我是標題",
          },
          {
            username: "暱稱",
            title: "我是標題",
          },
          {
            username: "暱稱",
            title: "我是標題",
          },

          ]
        },
        {
          list: [{
            username: "暱稱",
            title: "我是標題",
          },
          ]
        },
        {
          list: [{
            username: "暱稱",
            title: "我是標題",
          },
          ]
        },
        {
          list: [{
            username: "暱稱",
            title: "我是標題",
          },
          ]
        },
        {
          list: [{
            username: "暱稱",
            title: "我是標題",
          },
          ]
        },
        {
          list: [{
            username: "暱稱",
            title: "我是標題",
          },
          ]
        }]
      }
    },
    methods: {
      tabtap(index) {
        this.tabIndex = index;
      },
      //滑動切換導航
      tabChange(e) {
        this.tabIndex = e.detail.current;
        // console.log(this.tabIndex)
      },
    }
  }</script>

• css(重點)

<style>
	/* 解決不能滾動問題 */
	/* uni-swiper .uni-swiper-wrapper, */
	uni-swiper-item {
	    overflow-y: scroll !important;
	}
</style>