小程序Swiper使用 灵活多用

小程序swiper

话不多说，贴代码:

<swiper class="heroSwiper" autoplay="true" circular="true" interval="3000" duration="1000">

      <block wx:for="{{heroList}}" wx:key="index1" wx:for-index="index1">

        <swiper-item>

          <view class="itemHeroView">

            <view bindtap="heroClick" wx:for="{{item}}" class="messageItemView" id="{{index}}" data-index1="{{index1}}" wx:key="index">

              <image class="itemHeroViewImg" src="{{item.url}}"></image>

            </view>

          </view>

        </swiper-item>

      </block>

    </swiper>

 

//模拟数据 如果是网络请求的数据 将数据用此方法处理过后即可正常展示

  filterData: function (e) {

    var s = 0;

    var index = 14;

    var data = {

      url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587363959648&di=8ba4f42e71eebae48221bb1c00b24185&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F13%2F20180813101048_uepdh.thumb.700_0.jpeg',

      name: '方雯雯',

      age: '22',

      city: '北京',

      citySecond: '朝阳'

    }

    var array = []

    var filterArray = []

    for (var i = 0; i < index; i++) {

      if (s < 3) {

        s++;

        array.push(data)

        if(i == index-1){

          filterArray.push(array)

        }

      } else {

        filterArray.push(array)

        s = 0

        array = []

      }

    }

    this.setData({

      heroList: filterArray

    })

  },

 

  //点击事件

  heroClick:function(e){

    var id = e.currentTarget.id

    var currentIndex = e.currentTarget.dataset.index1

    console.log(currentIndex+"---"+id)

    console.log(this.data.heroList[currentIndex][id].name)

  }

 

 

 

.itemHeroView {

  margin-top: 20rpx;

  margin-left: 20rpx;

  width: 100%;

  display: flex;

  flex-wrap: wrap;

  flex-direction: row;

}

 

.messageItemView {

  width: 230rpx;

  height: 230rpx;

  margin-left: 10rpx;

}

 

.crownImg {

  position: absolute;

  width: 53rpx;

  height: 42rpx;

  margin-left: 176rpx;

}

 

.itemHeroViewImg {

  border-radius: 15rpx;

  /* margin-left: 10rpx; */

  width: 230rpx;

  height: 230rpx;

}

 

.bottomView {

  position: absolute;

  top: 136rpx;

  display: flex;

  flex-direction: column;

  width: 230rpx;

  height: 114rpx;

}

 

.heroName {

  margin-left: 21rpx;

  margin-top: 30rpx;

  font-size: 30rpx;

  color: #FFFFFF;

}

 

.heroAgeCity{

  margin-left: 21rpx;

  margin-top: 10rpx;

  font-size: 24rpx;

  color: #FFFFFF;

}