关于前端:小程序swiper-自定义样式修改

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