Small program swiper custom style modification

When we were working on projects, we often used the Swiper component to do some rotating effects, but we ran into a problem: the native swiper style of the applet didn’t meet the requirements of the draft. In this case, we have to manually change the style of the applet’s native swiper.

Scenario 1:

A swiper-Item image or element is not 100% wide, but has a fixed width
Second, indicatorDots are also self-defined

HTML main code:

<view class="banner-wrap">
  <swiper class="swiper"
          autoplay="{{autoplay}}"
          interval="{{interval}}"
          indicatorDots="{{indicatorDots}}"
          duration="{{duration}}"
          circular="{{true}}"
          previous-margin="68px"
          next-margin="68px"
          current="activeIndex"
          bindchange="switchCard">
    <block wx:for="{{swipers}}" wx:key="*this" wx:index="index">
      <swiper-item class="swiper-item-wrap">
        <view class="swiper-item {{activeIndex == index? 'current' : ''}}">
          <image class="swiper-item-img" src="{{item.img}}"></image>
        </view>
      </swiper-item>
    </block>
  </swiper>
</view>
Copy the code

The CSS code is as follows:

.banner-wrap..swiper {
  height: 648rpx
}

.swiper-item {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  width: 460rpx;
  height: 608rpx;
  border-radius: 20rpx;
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  opacity: 1
}

.swiper-item-img {
  width: 100%;
  height: 100%;
  display: block
}

.current {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1
}
Copy the code

Js main code:

Page({
  data: {
    indicatorDots: true.autoplay: true.interval: 2000.duration: 500.activeIndex: 0.swipers: [{img: 'http://script-shop.oss-cn-hangzhou.aliyuncs.com/images/eK8OjAd7VvHHNfeQe9sdyEyus6xcG6uy.jpg'
      },
      {
        img: 'http://script-shop.oss-cn-hangzhou.aliyuncs.com/uploads/em68Jt9maLFMAlKEGjfp9bcqBzkpK07hJStwEYG0.png'
      },
      {
        img: 'https://script-shop.oss-cn-hangzhou.aliyuncs.com/uploads/9bBGFMzwW2cTYfU4OnRf6NrmMyPG00aAa03xSiHo.jpeg'}},switchCard(e) {
    let current = e.detail.current;
    this.setData({ activeIndex: current });
  },
  onLoad: function(options) {}});Copy the code

In this way, the above effect can be completed. The distance between previous-margin and next-margin can be modified according to the design draft.

Modify the size and shape of the panel indicator. Refer to this article for details about this component class

.wx-swiper-dots {
  position: relative
}

/* Level indicator */
.wx-swiper-dots.wx-swiper-dots-horizontal {
  margin-bottom: -20rpx
}

/* Style of unselected points */
.wx-swiper-dot {
  width: 10rpx;
  height: 10rpx;
  background: #FFE4CF ! important;
  margin-left: -8rpx
}

/* Activate style */
.wx-swiper-dot-active {
  width: 28rpx ! important;
  height: 10rpx;
  background: linear-gradient(-30deg.#FF6B17 0%.#FF8D00 100%) ! important;
  border-radius: 10rpx ! important
}
Copy the code

Scenario 2

<view class="diaries">
  <! -- Background image -->
  <image class="bg-img" src="{{bgSrc}}"></image>
  <! -->
  <swiper circular="{{circular}}"
          indicator-dots="{{indicatorDots}}"
          autoplay="{{autoplay}}"
          interval="{{interval}}"
          duration="{{duration}}"
          bindchange="intervalChange"
          next-margin="100rpx"
          current="{{current}}"
          previous-margin="100rpx"
          class="swiper-news">
    <block wx:for="{{newsList}}" wx:key="unique">
      <swiper-item class="new-item">
        <view class="{{index==current? 'bg-msg':'bg-unmsg'}}">
          <image class="{{index==current? 'slide-image':'other-image'}}" data-index="{{index}}" src="{{item.img}}"/>
          <view wx:if="{{index==current}}">The title</view>
        </view>
      </swiper-item>
    </block>
  </swiper>

  <! -- Small picture round seeding -->
  <swiper indicator-dots="{{indicatorDots}}"
          autoplay="{{autoplay}}"
          interval="{{interval}}"
          duration="{{duration}}"
          bindchange="dotsChange"
          next-margin="580rpx"
          current="{{current}}"
          class="swiper-dots">
    <block wx:for="{{newsList}}" wx:key="unique">
      <swiper-item class="dot-item" data-index="{{index}}" bindtap="changeIndex">
        <image class="dot-image" data-index="{{index}}" src="{{item.img}}"/>
        <view class="{{index==current? 'line':''}}"></view>
      </swiper-item>
    </block>
  </swiper>
</view>
Copy the code

.page{
  height: 100%;
}
.diaries{
  height: 100%;
}
.swiper-news{
  height: 822rpx;
  margin-top: 32rpx
}
.new-item{
  height: 100%;
  display:flex;
  flex-direction: column;
  align-items:center;
}

.bg-img{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  filter: blur(50rpx);
}
.slide-image{
  width: 468rpx;
  height: 556rpx;
  border-radius: 20rpx;
  margin-bottom: 26rpx;
  box-shadow:0rpx 40rpx 50rpx -40rpx #3f3e3e;
  position:absolute;
  top: -142rpx;

}
.other-image{
  width: 468rpx;
  height: 516rpx;
  border-radius: 20rpx;
}
.bg-msg{
  width: 540rpx;
  height: 640rpx;
  background-color: white;
  border-radius: 20rpx;
  display: flex;
  justify-content: center;
  box-shadow:0rpx 40rpx 50rpx -40rpx #3f3e3e;
  position:absolute;
  bottom:32rpx;
  padding:  0 34rpx;
  padding-top:446rpx;
  box-sizing:border-box;
}
.bg-unmsg{
  width: 540rpx;
  height: 659rpx;
  border-radius: 20rpx;
  display: flex;
  justify-content: center;
  position:absolute;
  bottom:0;
}
.swiper-dots{
  margin-top: 8rpx;
}
.dot-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left:280rpx;
}
.dot-image{
  width: 118rpx;
  height: 154rpx;
  border-radius: 10rpx;
}
.line{
  width: 50rpx;
  height: 8rpx;
  background-color: white;
  border-radius: 8rpx;
  margin-top: 24rpx;
}
Copy the code

Page({
  data: {
    indicatorDots: false.autoplay: true.circular: false.interval: 2000.duration: 1000.current: 0.newsList: [{img: 'http://script-shop.oss-cn-hangzhou.aliyuncs.com/images/eK8OjAd7VvHHNfeQe9sdyEyus6xcG6uy.jpg'
      },
      {
        img: 'http://script-shop.oss-cn-hangzhou.aliyuncs.com/uploads/em68Jt9maLFMAlKEGjfp9bcqBzkpK07hJStwEYG0.png'
      },
      {
        img: 'https://script-shop.oss-cn-hangzhou.aliyuncs.com/uploads/9bBGFMzwW2cTYfU4OnRf6NrmMyPG00aAa03xSiHo.jpeg'}].bgSrc: 'http://script-shop.oss-cn-hangzhou.aliyuncs.com/uploads/em68Jt9maLFMAlKEGjfp9bcqBzkpK07hJStwEYG0.png'
  },
  // Large slide
  intervalChange(e) {
    this.setData({
      current: e.detail.current
    })
    // Change the background image
    let src = this.data.newsList[e.detail.current].img
    this.setData({
      bgSrc: src
    })
  },
  // Small slide
  dotsChange(e) {
    this.setData({
      current: e.detail.current
    })
    // Change the background image
    let src = this.data.newsList[e.detail.current].img
    this.setData({
      bgSrc: src
    })
  },
  // Click the thumbnail
  changeIndex(e) {
    this.setData({
      current: e.currentTarget.dataset.index
    })
    // Change the background image
    let src = this.data.newsList[e.currentTarget.dataset.index].img
    this.setData({
      bgSrc: src
    })
  }
})
Copy the code

Conclusion:

In fact, these two are relatively simple and commonly used, and some indicators are numeric, which can also use the current value to do the corresponding processing, the principle is similar.

Small program swiper custom style modification