轮播

wxml

<!--轮播——开始-->

<swiper autoplay='true' interval='4000' bindchange="swiperChange" class="swiper">

  <swiper-item wx:for="{{slider}}" wx:key="unique">

    <image src="{{item.picUrl}}" class="img"></image>

  </swiper-item>

</swiper>

<view class="dots">

  <block wx:for="{{slider}}" wx:key="unique">

    <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>

  </block>

</view>

<!--轮播——结束-->

js

//轮播图

  lbt:function(){

    var that=this;

    wx.request({

      url: '' + app.information.host + '/api/json/common/common.ashx?action=fragment&companyid=' + app.information.companyid + '&label=xcxsylbt',

      header: {

        'content-type': 'application/json'

      },

      //请求后台数据成功

      success: function (res) {

        var ryjyjkc02 = [];

        for (var i = 0; i < res.data.fragmentPictureList.length; i++) {

          ryjyjkc02[i] = {

            picUrl: res.data.fragmentPictureList[i].fragmentPicture

          }

        }

        that.setData({

          slider: ryjyjkc02

        })

      }

    });

  },

/* 轮播*/

  footerTap: app.footerTap,

  //轮播图防卡动

  swiperChange: function(event) {

    this.setData({

      swiperCurrent: event.detail.current

    })

    if (event.detail.source == "touch") {

      //防止swiper控件卡死

      if (this.data.swiperCurrent == 0 && this.data.preIndex > 1) { //卡死时，重置current为正确索引

        this.setData({

          swiperCurrent: this.data.preIndex

        });

      } else { //正常轮转时，记录正确页码索引

        this.setData({

          preIndex: this.data.swiperCurrent

        });

      }

    }

  },

wxss

.warp{position:fixed;top:0;width:100vw;height:100vh;z-index:9999}

.warp button{width:100%;height:100%;position:absolute;border-radius:0;color:transparent;background:transparent no-repeat center center;background-size:cover;background-color:rgba(0,0,0,0);z-index:99999;opacity:0}

/*需要设置的参数*/

/*总体背景颜色*/

page{background: #fff;}

/*轮播图的高度*/

.swiper{height: 50vw;margin-bottom:-2.8vw;}

.title{position: relative;font-size: 4vw;text-align: center;z-index: 3 ;font-family:'MyNewFont'!important;color:#1a1a1a;font-weight: 600;}

/*轮播（banner）*/

.swiper .img{width: 100%;display: block;height:50vw;}

.dots{ position: relative;left: 0;right: 0;top: -0.8vw;display: flex;justify-content: center;z-index: 99;}

/*轮播小点*/

.dots .dot{margin: 0 4rpx;transition: all .6s;margin-right: 3vw;width: 2.1vw;height: 2.1vw;background-color: #FFFFFF;display: inline-block;border-radius: 100%;}

.dots .dot.active{background: #E60033;}