微信小程序实现滑块的点击与轮播图的切换_小程序轮播点击箭头切换事件-优快云博客

本文介绍了一种在前端开发中实现轮播图与滑块联动的技术方案。通过独立的滑块与轮播图设计，利用滑块的地址下标与轮播图的current属性绑定，实现了点击标签页或滑动内容时轮播图的平滑切换。代码示例展示了如何使用WXML和JS来控制这一联动效果。

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

实现效果 :点击标签页可以实现切换
				滑动内容也可以切换

代码思想: 1、独立的滑块与独立的轮播图
		 2、通过滑块的地址下标与轮播图的current绑定实现
		 	点击按钮轮播图调至相应界面
		 3、通过bindchange事件得到轮播图下标与滑块下标绑定

效果图如下
在这里插入图片描述
html代码

重点：轮播图的current属性可以控制显示页

<!-- 滑块 -->
<view style="margin:0 10px">
	<scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%" scroll-with-animation>
		<view class="scroll-view-item_H" wx:for="{{arr}}" wx:key="index">
			<view style="margin:0 10px" class="{{index===index1?'bor':''}}" bindtap="btn" data-index="{{index}}">{{item}}</view>
		</view>
	</scroll-view>
</view>
<!-- 轮播图 -->
<view style="margin:0 10px">
	<swiper bindchange='huadong' circular class="swi" current='{{index1}}'> 			//重点
		<swiper-item>
			<searchListA types="1018" value="{{value}}"></searchListA>
		</swiper-item>
		<swiper-item>
			<searchListB types="1" value="{{value}}"></searchListB>
		</swiper-item>
	</swiper>
</view>

js代码

  data: {
    index1: 0, //滚动下标
  },

  //滑动
  huadong(e) {
    this.setData({
      index1: e.detail.current
    })
    console.log(this.data.index1)
  },
  //滑块点击事件
  btn(e) {
    this.setData({
      index1: e.currentTarget.dataset.index
    })
    console.log(e.currentTarget.dataset.index)
  },