First, the idea of implementation

The swiper map is realized based on the Swiper component (document) provided by wechat mini program.

The following properties are used in the swiper component:

  • Display-multiple-items: displays the number of sliders at the same time
  • Current: indicates the index of the current slider
  • Indicator -dots: Whether to display panel indicator points
  • Autoplay: Indicates whether to switch automatically
  • Interval: indicates the interval for automatic switchover
  • Circular: Whether to adopt cohesive sliding
  • Previous-margin: a margin used to show a small part of a previous item
  • Next-margin: the back margin used to show a small part of the next item

The event used is bindchange, and the change event will be triggered when the user manually slides the current change. The binding event handler function is handleSwiperChange, in which the current center display item is set.

In WXML, use the for loop to iterate through the array of images, loading all image items as swiper-items.

Two, implementation code

WXML code:

<! --index.wxml-->
<swiper class="cover_swiper" indicator-dots='true' display-multiple-items='1' current='{{ centerItem }}' bindchange='handleSwiperChange'  previous-margin='30' next-margin='30' autoplay='true' circular='true' interval='2000'>
  <block wx:for="{{coverList}}" wx:key="id">
    <swiper-item>
      <view class='imageBox' style='text-align:center'>
      <view class='mask' wx:if='{{ index ! = centerItem }}'></view>
      <image src="{{item.url}}" mode='aspectFit' /></view>
    </swiper-item>
  </block>
</swiper>
Copy the code

WXSS code:

/**index.wxss**/
.cover_swiper {
  height: 180px;
}
.cover_swiper .mask {
  width: 100%;
  height: 100%;
  background-color: rgba(255.255.255.0.5);
  position: absolute;
  left: 0;
  top: 0;
}
Copy the code

Js code:

Add the following data to data:


// Center the position of the display item
centerItem: 0.//
coverList:[
  {
    id: 0.url: "xxx"
  },
  {
    id: 1.url: "xxx"
  },
  {
    id: 2.url: "xxx"
  },
  {
    id: 3.url: "xxx"
  },
  {
    id: 4.url: "xxx"}].Copy the code

At the same level as data, add an event handler to change the position of the center display item when the user slides the scroll graph:

// Change the center item while sliding in the rotation chart
handleSwiperChange(e) {
  this.setData({
    centerItem: e.detail.current,
  })
},
Copy the code

Three, to achieve the effect