uniapp切换列表与滑动效果

scroll + swiper

slider是一个很经典的组件，可以看到页面是由顶部的标题模块和页面主体的左右滑动翻页模块组成的，并且主体页面还可以上下滑动。我们可以把这个页面进行功能逻辑拆分，可以将slider分为tab+swiper+scroll-view三个部分。其中，tab负责标题的切换，swiper负责页面的左右滑动，scroll-view负责页面的上下滑动。这样就能够大概理解slider组件的工作原理了。

index.vue

template

<template>
	<view>
		<!-- 自定义组件 -->
		<nav-tab ref="tab" @change="swtichSwiper"></nav-tab>
	
		<!-- 当前滑块内容 -->
		<swiper class="scroll-view-height" @change="swipeIndex" 
			:current="current" :duration="300">
			<swiper-item>
			  <scroll-view scroll-y="true" class="scroll-view-height list-content">
				<view class="list-item" v-for="(item,index) in 20" 
				 :key="'推荐'+index">推荐-list {{index}}</view>
			  </scroll-view>
			</swiper-item>
			<swiper-item>
			 <scroll-view scroll-y="true" class="scroll-view-height list-content">
				<view class="list-item" v-for="(item,index) in 20" 
				  :key="'热门'+index">热门-list {{index}}</view>
			 </scroll-view>
		  </swiper-item>
		</swiper>
	</view>
</template>

script

export default {
	data() {
		return {
			// swiper索引
			current: 0
        }
    },
	methods: {
		swipeIndex(index) {
			// 获得swiper切换后的current索引
			this.$refs.tab.switchTab(index.detail.current)
			
			// scroll
			this.$refs.tab.activeChanged(index.detail.current)
		},
		swtichSwiper(index) {
			// 通过tab组件回调点击切换的index同步swiper的current索引
			this.current = index
		}
	}
}

style

.scroll-view-height {
    /* 页面高度减去包含状态栏、标题、tab组件的高度 */
    height: calc(100vh - var(--status-bar-height) - 178rpx);
}

.list-content {
    background-color: #F4F4F4;
}

.list-item {
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    margin: 4rpx 0;
    background-color: #FFFFFF;
}

组件

components文件夹新建nav-tab目录和文件

nav-tab.vue

template

scroll组件解决了多个标题在一栏的问题

<template>
	<view class="container">
		<!-- scroll -->
		<view class="scroll-box">
			<scroll-view class="scroll-view_H d-flex" scroll-x="true" @scroll="scroll" scroll-left="0">
				<view :class="['scroll-view-item_H',i === active ? 'active':'']" v-for="(item,i) in list"
					@click="activeChanged(i)">
					{{item}}
				</view>
			</scroll-view>
		</view>
		
		<!-- table -->
		<view class="tab">
		  <view class="tab-item" v-for="(item,index) in list"
		    :class="{'tab-item-active' : index === current}"
		    :key="index" @click="switchTab(index)">
		    {{item}}
		  </view>
		</view>
		
	</view>
</template>

script

  export default {
    name: "nav-tab",
	data() {
		return {
			list: ['推荐', '热门','服装','箱包','鞋履','配饰','美妆','腕表'],
			current: 0,
			
			active:0,
		}
	},
    methods: {
		switchTab(index) {
			this.current = index
			// 向父页面回传tab索引
			this.$emit('change', index)
			
		},
	
		scroll: function(e) {
			// console.log(e)	
		},
		activeChanged(i) {
			this.active = i;
			this.$emit('change',i)
		},
	}
}

style

 .tab {
    height: 90rpx;
    line-height: 90rpx;
    display: flex;
  }

  .tab-item {
    width: 50%;
    text-align: center;
    transition: all .3s ease-in-out;
	color: #333;
  }
  .tab-item-active {
    background-color: #00AEBE;
    color: #FFFFFF;
  } 
/* 横向滑动 */
.scroll-view_H {
	padding: 20upx 0 50upx 0;
	white-space: nowrap;
	width: 100%;
}
.scroll-view-item_H {
	display: inline-block;
	
	padding: 0 20upx;
	text-align: left;
	font-size: 30rpx;
	color: rgba(181, 185, 198, 1);
	margin-right: 20upx;
	
}
.active {
	color: rgba(51, 48, 46, 1);
}