uniapp.微信小程序中scroll左右滚动条联动效果实现

Dummerd

已于 2022-11-21 11:41:16 修改

阅读量2.1k

点赞数 1

文章标签： uni-app javascript 前端

于 2022-11-21 11:26:20 首次发布

本文链接：https://blog.youkuaiyun.com/Dummerd/article/details/127960536

版权

本文介绍了在uni-app微信小程序中如何实现scroll左右滚动条的联动效果。通过设置数据属性并监听事件，实现了点击左边标签后右边图片随之滚动的功能，详细讲解了相关代码逻辑和实现步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.左边滚动条

左边标签

<scroll-view scroll-y="true"  :style="'height:'+scrollH+'px'" :scroll-into-view="leftscrollinto">

<view v-for="(item,index) in cares" :k='index' @click="changeIndex(index)"
  :class="currentIndex==index? 'action':''" :id="'tab'+index">{
  {item.name}}</view>

</scroll-view>

2.右边滚动条

右边标签

<scroll-view scroll-y="true" :style="'height:'+scrollH+'px'"
					@scroll="scrollright" :scroll-into-view="rightscrollinto">
<view v-for="(j,i) in cares" :k='i' :id="'rightscroll'+i" class="right-item">
	<view v-for="(item,z) in j.app_cat