微信小程序滑动右侧滚动轴的时候，左侧的样式怎样跟着改变

学小程序时写过一个B站demo，也遇到此问题，最后自定义Swiper的Dot来实现了。

思路是：用view组件重写dot，给swiper组件绑定bindchange事件用来获取当前第几个dot，动态改变class。

<!-- 滚动广告 begin -->

<view class="slider-wrapper">

<swiper bindchange="swiperChange" indicator-dots="{{indicatorDots}}"

autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">

<block wx:for="{{imgUrls}}" wx:key="this">

<swiper-item>

<image src="{{item}}" class="slide-image"/>

</swiper-item>

</block>

</swiper>

<view class="swipe-btn-wrapper">

<view class="swipe-btn-list">

<view class="{{dotsClass[0]}}"></view>

<view class="{{dotsClass[1]}}"></view>

<view class="{{dotsClass[2]}}"></vi

新接了一个做微信小程序的活，编码方式跟vue很相似，样式编写比普通css样式轻松的多，现要实现一个轮播图的效果。

请教了我的同学，她说小程序有两种方法能实现这个效果：

微信小程序—swiper组件文档

wxml文件：

js文件：

法一实现出来的效果图是酱紫的：

wxml文件：

js文件：

wxss文件：

用法二实现出来的效果图是酱紫的：

最近写小程序经常用swiper，结果发现，坑好多啊。。。

坑1swiper-item的100%宽高

小程序默认swiper-item的宽高默认继承swiper的宽高，如果不用!important语法根本改不了

如果想要制作不同高度的swiper，则需要事先知道每张的高度然后给swiper赋高度值。

swiper-item的宽度也是一个巨坑，想要设置一次展示多个swiper-item可以设置这个属性：display-multiple-items，值为数字。但是这样每个item都是紧贴着的。

如果想要做出不紧贴的效果，唯一的方法就是swiper-item留部分白，另一部分放置想要展示的内容

掐指一算，我好久没更新了。。。

以上就是关于微信小程序滑动右侧滚动轴的时候，左侧的样式怎样跟着改变全部的内容，包括:微信小程序滑动右侧滚动轴的时候，左侧的样式怎样跟着改变、微信小程序—用动画实现自定义轮播图、swiper 的一堆坑等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！