小程序swiper 自定义样式修改
在我们做项目的时候，经常会使用到swiper组件做一些轮播效果，但是碰到这样一个问题：小程序原生的swiper样式满足不了设计稿的需求。这样的话，我们就必须手动的去改小程序原生的swiper的样式了。
场景1：
一是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-/images/eK8OjAd7VvHHNfeQe9sdyEyus6xcG6uy.jpg'},{img: 'http://script-shop.oss-cn-/uploads/em68Jt9maLFMAlKEGjfp9bcqBzkpK07hJStwEYG0.png'},{img: 'https://script-shop.oss-cn-/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
<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-/images/eK8OjAd7VvHHNfeQe9sdyEyus6xcG6uy.jpg'},{img: 'http://script-shop.oss-cn-/uploads/em68Jt9maLFMAlKEGjfp9bcqBzkpK07hJStwEYG0.png'},{img: 'https://script-shop.oss-cn-/uploads/9bBGFMzwW2cTYfU4OnRf6NrmMyPG00aAa03xSiHo.jpeg'}],bgSrc: 'http://script-shop.oss-cn-/uploads/em68Jt9maLFMAlKEGjfp9bcqBzkpK07hJStwEYG0.png'},// 大图滑动intervalChange(e) {this.setData({current: e.detail.current})//改变背景图let src = this.data.newsList[e.detail.current].imgthis.setData({bgSrc: src})},// 小图滑动dotsChange(e) {this.setData({current: e.detail.current})//改变背景图let src = this.data.newsList[e.detail.current].imgthis.setData({bgSrc: src})},// 点击小图changeIndex(e) {this.setData({current: e.currentTarget.dataset.index})//改变背景图let src = this.data.newsList[e.currentTarget.dataset.index].imgthis.setData({bgSrc: src})}})
总结：
其实这2种也是比较简单和常用的，还有的指示器是数字的这种也可以使用current值去做相应的处理，原理都差不多。
