uniapp实现类似美团左右scroll滑动联动

最新推荐文章于 2024-10-10 13:11:08 发布

SakuraPowerc

最新推荐文章于 2024-10-10 13:11:08 发布

阅读量1k

点赞数 14

文章标签： uni-app 前端 javascript vue.js

本文链接：https://blog.csdn.net/2301_77513512/article/details/135499977

版权

文章讲述了在小程序开发中，如何处理右侧商品模块高度不一致的问题，通过计算每个模块高度并实现左右滑动联动，以及isScroll变量的使用来区分用户主动滑动与点击左侧锚点触发的滑动，确保锚点效果不受影响。

摘要由CSDN通过智能技术生成

1.这个功能主要难点有两个

右侧每个模块的高度，因为右侧是商品，高度不一致，左侧是类型高度可固定
右侧跟左侧滑动联动后，需要解决点击左侧锚点到右侧时不会因为右侧的滑动而影响左侧的锚点效果。

2.参考代码（我这里右侧的模块都是相同高度，如果是非相同的需要计算每个模块的高度，方法差不多，就多算一下）

<template>
	<view class="scroll">
		<!-- 左侧边栏 -->
		<scroll-view ref="leftScroll" class="one" scroll-y="true" @scroll="scroll"             
         scroll-with-animation>
			<view v-for="(item,index) in backGround" :style=" 
       {'backgroundColor':choiceIndex == index?'#000':item}" @click="choiceFn(index)" >
           {
  {index}}
         </view>
		</scroll-view>
		
		<!-- 有侧边栏 -->
		<scroll-view ref="rightScroll" class="two" scroll-y="true" :scroll- 
          top=&#