小程序中实现轮播图效果【小程序开发】

wxml中使用swiper标签

<swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">  
    <block wx:for="{{movies}}" wx:for-index="index">  
        <swiper-item>  
          <image src="{{item.url}}" class="slide-image" mode="aspectFill"/>  
        </swiper-item>  
    </block>  
</swiper> 

js中如下代码

const app = getApp()
Page({
movies: [
      { url: 'http://img5.imgtn.bdimg.com/it/u=2350869615,680865620&fm=26&gp=0.jpg' },
      { url: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3726728865,656195211&fm=26&gp=0.jpg' },
      { url: 'http://img5.imgtn.bdimg.com/it/u=2350869615,680865620&fm=26&gp=0.jpg' },
      { url: 'http://img1.imgtn.bdimg.com/it/u=1982728636,2170565799&fm=11&gp=0.jpg' }
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000,
  },
     })

wxss中添加样式

.swiper {
  height: 400rpx;
  width: 100%;
}

为您推荐

评论已关闭