小程序轮播图

最新推荐文章于 2024-04-21 18:09:39 发布

qq_38674970

最新推荐文章于 2024-04-21 18:09:39 发布

阅读量569

点赞数

分类专栏：小程序文章标签：小程序1

小程序专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!--banner  -->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}" wx:key="unique2">
      <swiper-item>
        <image src="{{item}}" />
      </swiper-item>
    </block>
</swiper>

    // banner 别忘记写data里
    imgUrls: [
      'http://mz.djmall.xmisp.cn/files/banner/20161219/148211980641.png',
      'http://mz.djmall.xmisp.cn/files/banner/20161222/148238831285.png',
      'http://mz.djmall.xmisp.cn/files/banner/20161222/14823895573.png'
    ],
    indicatorDots: true, //是否显示面板指示点
    autoplay: true, //是否自动切换
    interval: 3000, //自动切换时间间隔,3s
    duration: 1000, //  滑动动画时长1s

 
  /* 直接设置swiper属性 */ 
 
  swiper { 
 
  height: 
  300 
  rpx; 
 
   } 
 
  swiper-item 
  image { 
 
  width: 
  100%; 
 
  height: 
  100%; 
 
   }