微信小程序轮播图

浏览 44 次     时间 2021-08-26 21:57:34     作者 有勇气的牛排    标签 微信小程序

1 index.html

< view>
  < swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
    < block wx:for-items="{{swiperImage}}" wx:key="key">
      < swiper-item>
        < image src="{{item.url}}" style="width:100%;height:100%" class="slide-image" mode="aspectFill" />
      < /swiper-item>
    < /block>
  < /swiper>
< /view>

2 index.js

data: {
data: {
  swiperImage: [
    { url: 'https://static.920vip.net/pe/swiper/swiper3.jpg' },
    { url: 'https://static.920vip.net/pe/swiper/swiper2.jpg' },
    { url: 'https://static.920vip.net/pe/swiper/swiper1.jpg' }
  ],
},

3 效果

https://static.920vip.net/4b9785ac56dea2567e62ba08d1ca1767.png

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。