微信小程序（组件---视图组件案例）

微信小程序swiper实现滑动放大缩小效果：

①先将基础轮播图写出来，开启无缝衔接模式circular

<swiper 
  circular="{
  {circularValue}}"
  class="carousel">
  <block wx:for="{
  {carouselList}}" wx:key="index">
    <swiper-item>
      <image src="{
  {item.imgSrc}}"></image>
    </swiper-item>
  </block>
</swiper>

    carouselList:[
      { id: 1, imgSrc: "/imgs/01.png" },
      { id: 2, imgSrc: "/imgs/01.png" },
      { id: 3, imgSrc: "/imgs/01.png" }
    ],
    circularValue:true,

.carousel{
  width: 100%;
  height: 360rpx;
}
.carousel image{
  width: 100%;
  height: 360rpx;
}

②开启指示点
属性：

 indicator-dots="{
  {indicatorDots}}"
 indicator-color="{
  {indicatorColor}}"
 indicator-active-color="{
  {activeColor}}"

值：

// 开启指示点
indicatorDots:true,
//指示点颜色
indicatorColor:'rgba(0,0,0,.8)',
// 激活指示点的颜色
activeColor:'darkred',

③自定义指示点样式

.carousel .wx-swiper-dot{
  display: inline-flex;
  height: 10rpx;
  margin-left: 20rpx;
  justify-content: space-between;
}
.carousel .wx-swiper-dot{
  width: 20rpx;
}
.carousel .wx-swiper-dot-active{
  width: 40rpx;
}
.carousel .wx-swiper-dot::before{
  content: '';
  flex-grow: 1;
  background: rgb(255, 255, 255);
}
.carousel .wx-swiper-dot-active::before{
  background: darkred;
}

④添加前后边距
属性：

 previous-margin="{
  {previousMargin}}"
 next-margin="{
  {nextMargin}}"

值：

// 前边距
previousMargin:'30rpx',
// 后边距
nextMargin:'30rpx',

⑤设置中间激活块的类名active

<swiper 
  circular="{
  {circularValue}}"
  indicator-dots="{
  {indicatorDots}}"
  indicator-color="{
  {indicatorColor}}"
  indicator-active-color="{
  {activeColor}}"
  previous-margin="{
  {previousMargin}}"
  next-margin="{
  {nextMargin}}"
  bindchange="changeSwiper"
  class="carousel">
  <block wx:for="{
  {carouselList}}" wx:key="index">
    <swiper-item item-id="{
  {index}}">
      <image src="{
  {item.imgSrc}}" class="{
  {swiperIndex==index?'active':''}}"></image>
    </swiper-item>
  </block>
</swiper>

swiperIndex:0,

changeSwiper(event){
    console.log(event.detail.current)
    this