微信小程序轮播

轮播图是前端常见的组件，小程序轮播的实现如下：

wxml代码

<view class='carousel'>
  <swiper class='carousel_swiper' indicator-dots="true" indicator-color="#f4f4f4" indicator-active-color="#4eb8b8" autoplay="true" interval='2000' circular='true'>

    <swiper-item>
      <navigator url="../task/addtask" open-type="redirect">
        <image class ="item-img" src="https://image.fengmaijie.com/s/2020081717/01d538d701d600de2338902a5ed36ca2.jpg"></image>
      </navigator>

    </swiper-item>

    <swiper-item>
      <navigator url="../task/todayTask">
        <image class ="item-img" src="https://image.fengmaijie.com/s/2020081717/01d538d701d600de2338902a5ed36ca2.jpg"></image>
      </navigator>

    </swiper-item>

  </swiper>

</view>

wxss代码

 
.carousel {
  width: 100%; 
  transform: translateY(0);
}

.item-img{
  width:100%;  
}

.carousel_swiper {
  width: 710rpx;
  height: 436rpx; 
  margin: 40rpx auto; 
  border-radius:20rpx;

  /* 轮播图滚动时保持圆角 */
  overflow:hidden;
  transform: translateY(0);  /*这句在父级元素中也加上*/
  
}

 

来源：oschina

链接：https://my.oschina.net/wxdl/blog/4906608