위 챗 애플 릿 은 확대 효 과 를 가 진 윤 파 도 를 실현 한다.

본 논문 의 사례 는 여러분 에 게 위 챗 애플 릿 이 확대 효 과 를 가 진 라운드 방송 도 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
효과

WXML

<!--     -->
 <view class='Carousel'>
 <view class="recommend">
  <view class="swiper-container">
  <swiper class="swiper" autoplay="auto" interval="2000" duration="500" bindchange="swiperChange" previous-margin="40px" next-margin="40px" circular="true">
   <block wx:for="{{slider}}" wx:key="unique">
   <swiper-item data-url="{{item.linkUrl}}">
    <image class='{{swiperCurrent==item.imgId?"img_current":"img"}}' src="{{item.picUrl}}" mode="widthFix"></image>
   </swiper-item>
   </block>
  </swiper>
  <!--     -->
  <!-- <view class="dots">
   <block wx:for="{{slider}}" wx:key="unique">
   <view class="dot{{index == swiperCurrent ? ' active' : ''}}" bindtap="chuangEvent" id="{{index}}">{{index+1}}</view>
   </block>
  </view> -->
  </view>
 </view>
</view>

WXSS

.Carousel{
 margin-top: 49px;
 background-color: #fff;
}
.swiper-container{
 position: relative;
}
.swiper-container .swiper{
 padding-top: 8px;
 height: 380rpx;
 text-align: center;
}
swiper-item{
 display: flex;
 align-items: center;
 justify-content: space-around;
}
.swiper-container .swiper .img{
 width: 88%;
 height: 88%;
 border-radius: 10px;
}
.img_current{
 width: 100%;
 height: 100%;
 border-radius: 10px;
}
.swiper-container .dots{
 position: absolute;
 right: 40rpx;
 bottom: 20rpx;
 display: flex;
 justify-content: center;
}
.swiper-container .dots .dot{
 width: 28rpx;
 height: 28rpx;
 margin: 0 10rpx;
 border-radius: 50%;
 background: #fff;
 transition: all .6s;
 font: 300 18rpx/28rpx "microsoft yahei";
 text-align: center;
}
.swiper-container .dots .dot.active{
 background: #f80;
 color:#fff;
}

JS

data: { 
 //   
 slider: [
  { imgId: '0', linkUrl: 1, picUrl: '/images/swiper/swiper_1.png' },
  { imgId: '1', linkUrl: 2, picUrl: '/images/swiper/swiper_2.png' }, 
  { imgId: '2', linkUrl: 3, picUrl: '/images/swiper/swiper_3.png' },
  ],
 swiperCurrent: 0,
 }
 
  /**
 *    
 */
 swiperChange: function (e) {
 //       index  <swiper>   current  
 this.setData({
  swiperCurrent: e.detail.current
 })
 },

 //       
 // chuangEvent: function (e) {
 // this.setData({
 //  swiperCurrent: e.currentTarget.id
 // })
 // },

현재 관심 도가 높 은 위 챗 애플 릿 튜 토리 얼 을 추천 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.