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

小程序swiper 自定义样式修改相关推荐

小程序swiper点样式
小程序swiper点样式 .wx-swiper-dot { width: 10rpx !important; height: 10rpx !important; } .wx-swiper-dot-ac ...
微信小程序点击改变css,微信小程序按钮button样式修改自定义
在微信小程序中,当我们向页面中插入一个按扭button的时侯只需要简单的代码就可以了. 插入button按钮并保存后,便可以以预览界面看到一个原始的按钮. 小程序样式修改默认没有对按钮设置任何样式时 ...
微信小程序 swiper 自定义组件
实现功能点击tab 轮播跟这改变切换轮播 tab选中值相应改变轮播内容按照内容高度自适应 (默认150px) slot功能自定义每一个轮播的内容使用方法 <myswi ...
微信小程序的多选改变样式_微信小程序radio的样式修改
效果图代码 html部分 {{item.text}} css部分 radio .wx-radio-input.wx-radio-input-checked { border-color: #cc00 ...
小程序swiper修改指示点样式
小程序swiper修改指示点样式小程序修改swiper指示点样式,实在无法忍受网上乱七八糟,很简单,几行样式就可以了,整的那么麻烦,有那空,睡会儿他不香,翻到这个文章的就别再找了,我这就是你要的答案 ...
小程序Swiper组件做日历（周历）左右滑动动态修改数据
使用Swiper做一个周日历功能,要求滑动swiper时,可以显示上一周/下一周的日期. 一开始设想的是使用二维数组存放3个周的日期,右滑时push接下来的周,然后shift第一项,左滑反之,试了几种 ...
微信小程序swiper同时显示三张图片样式
最近在做微信小程序乐趣来首页,样式要求横向滑动,首页显示第一张图片但是要漏出第二张图片的一部分,中间页面要漏出前一张的一部分和后一张图片的一部分,想到小程序swiper组件,刚开始小程序并不支持这种样 ...
小程序如何自定义组件
之前在工作中的时候遇到过了小程序自定义组件的问题,所以就想和大家分享一下小程序如何自定义组件.首先让我们来了解一下组件是什么,为什么要使用组件.组件的官方解释是说开发者可以把页面内的功能模块抽象成自定 ...
【微信小程序】自定义弹窗蒙版输入框效果图完整代码
[微信小程序]自定义弹窗文本输入框效果图&完整代码效果图在输入框中进行内容的输入点击确认后在姓名一栏进行更新修改点击返回后姓名一栏不做任何修改在这个的基础上你可以自定义任何弹窗 wx ...

小程序swiper 自定义样式修改

小程序swiper 自定义样式修改

场景1：

场景2

总结：

小程序swiper 自定义样式修改相关推荐

最新文章

热门文章