[wechat applet] good looking carousel map component

Wechat applet good-looking rotation diagram component effect example

Use steps

First step ：

newly build components Folder

The second step ：

Create files according to the following directory ：（ The file name can be customized , However, when introducing components later, keep coherence ）

The third step ：

Code of each document ：

customSwiper.js：

// components/customSwiper.js
Component({
    
  /** *  A list of properties of a component  */
  properties: {
    
    imgUrls: Array,
  },

  /** *  The initial data of the component  */
  data: {
    
    currentIndex: 0
  },

  /** *  A list of methods for a component  */
  methods: {
    
    swiperChange(e) {
    
      this.setData({
    
        currentIndex: e.detail.current
      });
    }
  }
})

customSwiper.json：

{
    
  "component": true,
  "usingComponents": {
    }
}

customSwiper.wxml：

<!--components/customSwiper.wxml-->
<swiper indicator-dots="false" autoplay="{
     {true}}" interval="5000" indicator-dots="{
     {false}}" indicator-color='#8a8a8a' indicator-active-color='#333' circular="true" class="swiper-block" bindchange="swiperChange" previous-margin="100rpx" next-margin="100rpx" current="{
     {0}}">
  <block wx:for="{
     {imgUrls}}" wx:index="{
     {index}}" wx:key="index">
    <swiper-item class="swiper-item ">
      <image mode="aspectFill" src="{
     {item}}" class="slide-image {
     {currentIndex == index ? 'active' : 'common'}}" />
    </swiper-item>
  </block>
</swiper>

customSwiper.wxss：

/* components/customSwiper.wxss */
page{
    
  background-color: #fff;
}
.swiper-block {
    
  background: #fff;
  height: 500rpx;
  width: 100%;
}

.swiper-item{
    
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: flex-start;
  overflow: unset;
  width: 550rpx;
  height: 450rpx;
  padding-top: 70rpx;
  padding-bottom: 20rpx;
  box-sizing: border-box;
}

.slide-image{
    
  height: 300rpx;
  width: 450rpx;
  border-radius: 10rpx;
  margin: 0rpx 50rpx ;
  z-index: 1;
  box-shadow: 10rpx 5px 40rpx rgba(0, 0, 0,0.5);
}
.active{
    
  transform: scale(1.3);
  transition: all .5s ease-in 0s;
  z-index: 20;
  opacity: 1;
}
.common{
    
  transform: scale(1);
  transition: all .5s ease-in 0s;
  z-index: 0;
  opacity: 0.4;
}

.dots-box{
    
  display: flex;
  justify-content: center;
  align-items: center;
}

.dots{
    
  width: 30rpx;
  height: 6rpx;
  margin: 0 4rpx;
  background-color: #aaa;
  margin-top: -80rpx;
}
.bg-333{
    
  background-color: #333;
}

Step four ：

Introduce the component on the required page

In the home The page introduce For example

home.wxml:

  <!--pages/home/home.wxml-->
  <view>
	  <!--  Shuffling figure 2 -->
	  <custom-swiper imgUrls="{
     {carouselImgUrls}}" /> 
  </view>

home.js: （ The carousel map data changes according to its own image path ）

// pages/home/home.js
Page({
    

  /** *  Initial data of the page  */
  data: {
    
    //  Shuffling figure 2 data  （ The carousel map data changes according to its own image path ）
    carouselImgUrls:[
      "/images/yyqx1.jpg",
      "/images/yyqx2.jpg",
      "/images/yyqx3.jpg",
      "/images/yyqx4.jpg",
      "/images/yyqx5.jpg"
    ],
  },

  /** *  Life cycle function -- Monitor page loading  */
  onLoad: function (options) {
    

  },

  /** *  Life cycle function -- Listening page first rendering completed  */
  onReady: function () {
    

  },

  /** *  Life cycle function -- Monitor page display  */
  onShow: function () {
    

  },

  /** *  Life cycle function -- Monitor page hidden  */
  onHide: function () {
    

  },

  /** *  Life cycle function -- Monitor page uninstall  */
  onUnload: function () {
    

  },

  /** *  Page related event handler -- Monitor user pull-down action  */
  onPullDownRefresh: function () {
    

  },

  /** *  Handling function of page pull bottom event  */
  onReachBottom: function () {
    

  },

  /** *  Users click the upper right corner to share  */
  onShareAppMessage: function () {
    

  }
})

home.json:

{
    
  "usingComponents": {
    
    "custom-swiper": "../../components/customSwiper/customSwiper"
  }
}

home.wxss: No need to add style （ The component has ）

end

According to the above steps, the carousel chart component can be displayed correctly , Just change the image path .