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>

<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>

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
    },
    onl oad() {
      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>

原文地址：https://www.cnblogs.com/sxdpanda/p/14413279.html

效果图

组件封装

页面中使用

相关推荐