swiper轮播图

妖狐艹你老母 2022-09-05 02:00 257阅读 0赞

> swiper中只能放swiper-item  
> `block` 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

<swiper indicator-dots="{ {indicatorDots}}" autoplay="{ {autoplay}}" interval="{ {interval}}" duration="{ {duration}}">
      <block wx:for="{ {imgUrls}}">
        <swiper-item>
          <image src="{ {item}}" class="slide-image" />
        </swiper-item>
      </block>
    </swiper>
    <button bindtap="changeIndicatorDots"> indicator-dots </button>
    <button bindtap="changeAutoplay"> autoplay </button>
    <slider bindchange="intervalChange" show-value min="500" max="2000"/> interval
    <slider bindchange="durationChange" show-value min="1000" max="10000"/> duration

.slide-image{ 
      width: 100%;
      height: 100%;
    }

Page({ 
      data: { 
        imgUrls: [
          'https://images.pexels.com/photos/235621/pexels-photo-235621.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
          'https://images.pexels.com/photos/1563604/pexels-photo-1563604.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
          'https://images.pexels.com/photos/1112186/pexels-photo-1112186.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'
        ],
        indicatorDots: false,
        autoplay: false,
        interval: 5000,
        duration: 1000
      },
      changeIndicatorDots: function(e) { 
        this.setData({ 
          indicatorDots: !this.data.indicatorDots
        })
      },
      changeAutoplay: function(e) { 
        this.setData({ 
          autoplay: !this.data.autoplay
        })
      },
      intervalChange: function(e) { 
        this.setData({ 
          interval: e.detail.value
        })
      },
      durationChange: function(e) { 
        this.setData({ 
          duration: e.detail.value
        })
      }
    })

![请添加图片描述][078218f65a084ba3b669a1eec9ab8d1b.gif]

[078218f65a084ba3b669a1eec9ab8d1b.gif]: /images/20220829/2dbdb9d405cb40f68bfd890bf35a0e13.png