小程序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-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
<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值去做相应的处理，原理都差不多。
