uniapp通过scroll-view实现左右滚动联动

最新推荐文章于 2025-06-12 23:13:32 发布

原创

最新推荐文章于 2025-06-12 23:13:32 发布 · 4k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #javascript #前端

记录一下商城系统常见的分类模块，左右菜单滚动联动。
方法1：
主要用到scroll-view的scroll-into-view （值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素）
官方说法：uniapp-scrollview
在这里插入图片描述

方法2：
因为部分需求问题，我决定右侧模块使用swiper；
我们想要的效果是，上下滑动一部分，就直接滚动到下一个，不存在让显示一半。懒得计算比对滚动距离了，所以决定使用swiper
在这里插入图片描述

方法1代码：

<template>
	<view class="content">
		<view class="head">头部固定区域</view>
		<view class="list_box">
			<!-- 菜单左边 -->
			<view class="left">
				<scroll-view scroll-y="true" class="scroll">
					<view class="item" v-for="(item,index) in leftArray" :key="index"
						:class="{ 'active':index==leftIndex }" :data-index="index" @tap="leftTap">{
   
   {
   
   item.id}}</view>
				</scroll-view>
			</view>
			<view class="main">
				<scroll-view scroll-y="true" @scroll="mainScroll" class="scroll" :scroll-into-view="scrollInto"
					:scroll-with-animation="true" @touchstart="mainTouch" id="scroll-el">
					<block v-for="(item,index) in mainArray" :key="index">
						// 这块显示根据自己项目需求进行改变  
						// 我这边的横向滚动是因为产品要求，一般情况下都是罗列成小图标加标题
						<scroll-view class="right-scroll" :scroll-x="true" :id="'item-'+index">
							<block v-for="(item2,index2) in item.list" :key="index2">
								<view class="item">
									<view class="goods">
										<view>左边是第{
   
   {
   
    index + 1 }}个</view>
										<view>右边是第{
   
   {
   
    index2+1 }}个</view>
									</view>
								</view>
							</block>
						</scroll-view>
					</block>

				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
   
   
		data() {
   
   
			return {
   
   
				leftArray: [{
   
   
						id: 1
					},
					{
   
   
						id: 2
					},
					{
   
   
						id: 3
					},
					{
   
   
						id: 4
					},
					{
   
   
						id: 5
					},
					{
   
   
						id: 6
					},
					{
   
   
						id: 7
					},
					{
   
   
						id: 8
					},
				],
				mainArray: [],
				topArr: [],
				leftIndex: 0,
				isMainScroll: false,
				scrollInto: ''
			}
		},
		mounted() {
   
   
			this.getListData();
		},
		methods: {
   
   
			/* 获取列表数据 */
			getListData() {
   
   
				/* 因无真实数据，当前方法模拟数据 */
				let [left, main] = [
					[],
					[]
				];

				for (let i = 0; i < 8; i++) {
   
   
					left.push(`${
     
     i+1}类商品`);

					let list = [];
					for (let j = 0; j