微信小程序--两个swiper对应轮播

最新推荐文章于 2024-07-19 14:50:24 发布

瞎写点

最新推荐文章于 2024-07-19 14:50:24 发布

阅读量703

点赞数 1

分类专栏：微信小程序文章标签：微信小程序小程序前端

本文链接：https://blog.csdn.net/sinat_38628334/article/details/121381372

版权

项目需求：每张图片都有对应的文字，图片轮播时文字需要一起切换。

实现思路：使用两个swiper，获取其中一个swiper当前轮播内容的index，将这个index赋值给另外一个swiper的current属性

wxml:
<view>
  <swiper autoplay="{
  {true}}" indicator-dots="{
  {false}}" indicator-color="rgbg(255,255,255,0.6)" indicator-active-color="white" circular="true" interval="3000" duration="1000" bindchange="switchSwiper" class="imageSwiper" >
    <block wx:for="{
  {imgArr}}" wx:key="{
  {index}}">
      <swiper-item>
        <view style="position: relative;margin-bottom: 20rpx;">
          <image mode="aspectFill" src="{
  {item}}" bindtap="privewShowImg" class="imageStyle" data-url="{
  {item}}"></image>
        </view>