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

原创

已于 2022-11-21 11:41:16 修改 · 2.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #javascript #前端

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

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

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_category_items" :key="z" style="height: 200rpx;">
			<image :src="图片位置" mode="" class="image"></image>
			<view class="">{
  
  {item.name}}</view> //图片下的字
		</view>
</view>
</scroll-view>

点击左边字体后实现右边图片跟随

data() {