Custom style modification of small program swiper

Time:2021-4-27

Custom style modification of small program swiper

When we do projects, we often use the swiper component to do some carousel effects, but we encounter such a problem: the native swiper style of the small program can not meet the needs of the design draft. In this case, we have to manually change the native swiper style of the applet.

Scenario 1:

Custom style modification of small program swiper

  • One is that the image or element in swiper item is not 100% wide, but has a fixed width
  • Second, indicator dots is also customized

HTML main code:

<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"></image> </view> </swiper-item> </block> </swiper></view>

The main code of CSS is as follows:

.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 main code:

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) {
 }});

The distance between previous margin and next margin can be modified according to the design draft;
Modify the size and shape of the indicator point on the panel. For reference, please refer to this component classThis article

.wx-swiper-dots { position: relative}
/*Level indicator*/
.wx-swiper-dots.wx-swiper-dots-horizontal { margin-bottom: -20rpx}
/*Unselected style*/
.wx-swiper-dot { width: 10rpx; height: 10rpx; background: #FFE4CF !important; margin-left: -8rpx}
/*Activate style*/
.wx-swiper-dot-active { width: 28rpx !important; height: 10rpx; background: linear-gradient(-30deg, #FF6B17 0%, #FF8D00 100%) !important; border-radius: 10rpx !important}

Scene 2

Custom style modification of small program swiper

<view class="diaries">
 <!--  Background image -- > < image class = "BG img" > < / Image > <-- Big picture carousel -- > < 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}} "/ > < view Wx: if =" {{index = = current}} "> Title < / View >
 </view> </swiper-item> </block> </swiper>
 <!--  Small picture carousel -- > < swiper indicator dots = {indicator dots}} "autoplay = {autoplay}}" interval = {interval}} "duration = {duration}}" bindchange = {dotchange "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}}"/> <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'
 }, // large slide
 intervalChange(e) {
 this.setData({
 current: e.detail.current
 }) // change the background image
 let src = this.data.newsList[e.detail.current].img
 this.setData({
 bgSrc: src
 })}, // small graph sliding
 dotsChange(e) {
 this.setData({
 current: e.detail.current
 }) // change the background image
 let src = this.data.newsList[e.detail.current].img
 this.setData({
 bgSrc: src
 })}, // click the icon
 changeIndex(e) {
 this.setData({
 current: e.currentTarget.dataset.index
 }) // change the background image
 let src = this.data.newsList[e.currentTarget.dataset.index].img
 this.setData({
 bgSrc: src
 }) }})

Conclusion:

In fact, these two kinds of indicators are relatively simple and commonly used, and some indicators are digital. You can also use the current value to do the corresponding processing, and the principles are similar.