小程序轮播图

傷城~ 2021-08-14 00:13 461阅读 0赞

方法一：
    
    js代码
    
    Page({
      data: {
        //轮播图配置
        autoplay: true,
        interval: 3000,
        duration: 1200
      },
      onLoad: function () {
        var that = this;
        var data = {
          "datas": [
            {
              "id": 1,
              "imgurl": "../images/1.jpg"
            },
            {
              "id": 2,
              "imgurl": "../images/1.jpg"
            },
            {
              "id": 3,
              "imgurl": "../images/1.jpg"
            },
            {
              "id": 4,
              "imgurl": "../images/1.jpg"
            }
          ]
        };
        that.setData({
          lunboData: data.datas
        })
      }
    })
    
     
    
    html代码
    
    <swiper class="home-swiper" indicator-dots="true" autoplay="{
       {autoplay}}" interval="{
       {interval}}" duration="{
       {duration}}">
        <block wx:for-items="{
       {lunboData}}">
          <swiper-item>
            <image src="{
       {item.imgurl}}" class="slide-image" />
          </swiper-item>
        </block>
      </swiper>
    
    
    swiper标签外层不能套任何标签，否则无法实现
    css代码
    
    .home-swiper {
      width: 95%;
      height: 360rpx;
    }
    
    .slide-image {
      width: 100%;
      height: 100%;
    }
    
        
    
    方法二
    
    还有一种最简单的方法
    
    <scroll-view>
        <swiper catchtap="onSwiperTap" vertical="{
       {false}}" indicator-dots="true" autoplay="true" interval="5000">
            <swiper-item>
                <image id="7" src="/images/banner/wx.png" data-postId="3"></image>
            </swiper-item>
            <swiper-item>
                <image src="/images/banner/vr.png" data-postId="4"></image>
            </swiper-item>
            <swiper-item>
                <image src="/images/banner/iqiyi.png" data-postId="5"></image>
            </swiper-item>
        </swiper