uniApp实现swiper和scroll-view联动，滑动swiper时改变scroll-view，点击scroll-view时切换到指定的swiper（初学者）

系统管理员 2022-11-27 03:15 470阅读 0赞

## uniApp实现swiper和scroll-view联动，滑动swiper时改变scroll-view，点击scroll-view时切换到指定的swiper（初学者） ##

因为这里只是一个简单的示例，提供一下思路，具体需求自己加以改动。  
代码效果如图，运行环境为HBuilderX，运行在Chrome浏览器中的样子  
基本效果为，点击顶部导航的数字，下面swiper区域会滑动到相应区域，滑动swiper区域，顶部导航也会跟着改变，这边使用三种颜色进行区分  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center]  
代码如下

<template>
    	
    	<view>
    		
    		<scroll-view scroll-x="true" class="scroll-view">
    			
    			<view class="body-view" v-for="(item,index) in scrollViewList" :key="index" @click="changeSwiper(index)">
    				
    				<view :class="[currentTab==index ? 'menu-one-act' : 'menu-one']">
    					{ { item}}
    				</view>
    			</view>
    		</scroll-view>
    		
    		<swiper :indicator-dots="false" :autoplay="false" class="swiper" :current="currentTab" ref="swiper" @change="changeScroll">
    			<block v-for="(item,index) in scrollViewList" :key="index">
    				<swiper-item>
    					<scroll-view scroll-y="true" class="swiper-scroll">
    						<view class="swiper-item">{ { item}}</view>
    					</scroll-view>
    				</swiper-item>
    			</block>
    		</swiper>
    	</view>
    </template>
    
    <script>
    	export default { 
    		data() { 
    			return { 
    				//定义swiper的初始值为0，也就是第一页
    				currentTab: 0,
    				//再定义一个数组，存放数据
    				scrollViewList: ["频道", "分区"]
    			}
    		},
    		onLoad() { 
    			uni.getSystemInfo({ 	//获取系统信息
    				success: (res) => { 
    					this.swiperHeight = res.windowHeight + 'px'
    				},
    				fail: (res) => { 
    					console.log('error')
    				}
    			})
    		},
    		methods: { 
    			// 切换swiper时，改变scroll的函数
    			changeScroll: function(e) { 
    				// 令data中定义的currentTab等于当前swiper的current的值，来改变scroll
    				this.currentTab = e.target.current;
    			},
    			changeSwiper: function(index) { 
    				// 点击scroll，将返回的参数赋值给currentTab
    				if (this.currentTab == index) { 
    					return false;
    				} else { 
    					this.currentTab = index;
    				}
    			}
    		}
    	}
    </script>
    
    <style>
    	page { 
    		width: 100%;
    		height: 90%;
    	}
    
    	.body-view { 
    		display: inline-block;
    		width: 150rpx;
    		height: 60rpx;
    		background-color: #007AFF;
    	}
    
    	.scroll-view { 
    		text-align: center;
    		width: 100%;
    		white-space: nowrap;
    	}
    
    	.menu-one { 
    		background-color: green;
    		height: 100%;
    	}
    
    	.menu-one-act { 
    		background-color: blue;
    		height: 100%;
    	}
    
    	.swiper { 
    		height: 2000px;
    		text-align: center;
    		background-color: #DD524D;
    	}
    
    	.swiper-scroll { 
    		height: 100%;
    	}
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/345788bf42a24cb69d8b97cd1beebaba.png