小程序swiper 自定义样式修改

小程序swiper 自定义样式修改

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

场景1：

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

html主要代码：

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

     
    标题
    
   
      

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