小程序---轮播图

 <view class="pic_scroll">
  <swiper indicator-dots='{{indicatorDots}}' autoplay='true' interval='{{interval}}' duration='{{duration}}'>
    <block wx:for="{{imgUrls}}" wx:key="id">
      <swiper-item>
        <image src="{{item}}" class='slide-image'></image>
      </swiper-item>
    </block>
  </swiper>
</view>
.pic_scroll{
  width: 100%;
  height:350rpx;
  background-color: grey;
  position: absolute;
  left: 0;
  top: 670rpx;
}
.pic_scroll swiper{
  height:350rpx;
}
.slide-image{
  width: 100%;
  height: 100%;
}
data里面:设置轮播的图片和一些动画效果
 imgUrls: [
      '../../images/product_pic/scorll1.jpg',
      '../../images/product_pic/scorll2.jpg',
      '../../images/product_pic/scorll3.jpg',
      '../../images/product_pic/scorll3.jpg'
    ],
    indicatorDots: true,
    interval: 2000,
    duration: 1000,

猜你喜欢

转载自blog.csdn.net/Ariel_201311/article/details/81321660
今日推荐