小程序swiper 自定义样式修改

小程序swiper 自定义样式修改

在我们做项目的时候，经常会使用到swiper组件做一些轮播效果，但是碰到这样一个问题：小程序原生的swiper样式满足不了设计稿的需求。这样的话，我们就必须手动的去改小程序原生的swiper的样式了。

场景1：

image

• 一是swiper-item中图片或者元素不是100%的宽度，而是有固定的宽度
• 二是indicatorDots也是自定义出来的

html主要代码：

<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>

css主要代码如下：

.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
}

js主要代码：

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) {

  }
});

如此就可以完成以上效果，previous-margin和next-margin的距离可以根据设计稿修改；

修改面板指示点的大小、形状， 关于这个组件class可以参考这篇文章

.wx-swiper-dots {
  position: relative
}

/*水平指示器*/
.wx-swiper-dots.wx-swiper-dots-horizontal {
  margin-bottom: -20rpx
}

/*未选中点的样式*/
.wx-swiper-dot {
  width: 10rpx;
  height: 10rpx;
  background: #FFE4CF !important;
  margin-left: -8rpx
}

/*激活样式*/
.wx-swiper-dot-active {
  width: 28rpx !important;
  height: 10rpx;
  background: linear-gradient(-30deg, #FF6B17 0%, #FF8D00 100%) !important;
  border-radius: 10rpx !important
}

场景2

image

<view class="diaries">
  <!-- 背景图 -->
  <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}}">标题</view>
        </view>
      </swiper-item>
    </block>
  </swiper>

  <!-- 小图轮播 -->
  <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>

.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;
}

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'
  },
  // 大图滑动
  intervalChange(e) {
    this.setData({
      current: e.detail.current
    })
    //改变背景图
    let src = this.data.newsList[e.detail.current].img
    this.setData({
      bgSrc: src
    })
  },
  // 小图滑动
  dotsChange(e) {
    this.setData({
      current: e.detail.current
    })
    //改变背景图
    let src = this.data.newsList[e.detail.current].img
    this.setData({
      bgSrc: src
    })
  },
  // 点击小图
  changeIndex(e) {
    this.setData({
      current: e.currentTarget.dataset.index
    })
    //改变背景图
    let src = this.data.newsList[e.currentTarget.dataset.index].img
    this.setData({
      bgSrc: src
    })
  }
})

总结：

其实这2种也是比较简单和常用的，还有的指示器是数字的这种也可以使用current值去做相应的处理，原理都差不多。