详解微信小程序swiper小圆点默认样式改变

在微信小程序中，轮播图上的小圆点默认样式为黑灰色，这在视觉体验上不是很惊艳眼球，有时达不到我们的需求。那么，怎样进行默认样式的改变呢？

需要准备的东西：3张图片（swiper1,swiper2,swiper3）~

为了方便大家理解代码以及本地图片的引入，这里把我的文件结构也show~

一、方法1

采用官方提供的swiper属性(indicator-color与indicator-active-color)进行改变，不熟悉的请点击这里，所有属性都有->

https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html。

效果：

首先来看改变后的效果~

源码：

wxml代码

<swiper class="swipers" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" indicator-color="{{beforeColor}}" indicator-active-color="{{afterColor}}"><block wx:for="{{imgs}}"><swiper-item><image src="{{item.url}}"></image></swiper-item></block>
</swiper>

wxss代码

.swipers{height: 350rpx;}

js代码

Page({data: {imgs: [{url: '../../images/swiper1.jpg'},{url: '../../images/swiper2.jpg'},{url: '../../images/swiper3.jpg'}],indicatorDots: true,//显示面板指示点autoplay: true,//自动播放beforeColor: "white",//指示点颜色afterColor: "coral"//当前选中的指示点颜色}
})

说明：

这种方法修改小圆圈的默认样式有很多的局限性，只能修改颜色，别的no~

二、方法2

此方法改进了方法1的局限性，不仅仅只是简单的修改显示的颜色，比如能改变形状，大小等等。思路如下：

禁用掉swiper的indicator-dots属性（即删掉),然后用view组件模拟dots。

其实，一开始我做成了与前面的效果一样（但代码不同），方便比较~->哈哈，其实，用类同这个词语还是比较恰当吧，毕竟小圆点比方法1中的大。

效果如下：

源码：

wxml代码

<view class="wrap"><swiper class="swipers" autoplay="{{autoplay}}" current="{{currentSwiper}}" bindchange="swiperChange">  <block wx:for="{{imgs}}">  <swiper-item>  <image src="{{item.url}}"></image>  </swiper-item>  </block>  </swiper>  <!--重置小圆点的样式  --><view class="dots">  <block wx:for="{{imgs}}">  <view class="dot{{index == currentSwiper ? ' active' : ''}}"></view>  </block>  </view>
</view>

wxss代码

/*其实，正常情况下，没必要加.wrap,多余，但由于.dot要绝对定位到swiper上，而swiper中不能包裹其他的元素
（除了swiper-item)，所以只好加个.wrap用来约束.dot  */
.wrap{height: auto;position: relative;
}swipers{  height: 350rpx;
}  /*用来包裹所有的小圆点  */
.dots{  width: 156rpx;height: 36rpx; display: flex;flex-direction: row;position: absolute;left: 320rpx;bottom: 20rpx;
}
/*未选中时的小圆点样式 */
.dot{  width: 26rpx;  height: 26rpx;   border-radius: 50%;margin-right: 26rpx;background-color: white;
}
/*选中以后的小圆点样式  */
.active{  width: 26rpx;   height: 26rpx;background-color: coral;
}

js代码

Page({data: {imgs: [{url: '../../images/swiper1.jpg'},{url: '../../images/swiper2.jpg'},{url: '../../images/swiper3.jpg'} ],currentSwiper: 0,autoplay:true},swiperChange: function (e) {this.setData({currentSwiper: e.detail.current})}
})

说明：这种方法我们可以通过改变.dot与.active的样式来改变小圆圈的展示姿态，以满足我们的需求，我把代码改成如下，则效果为：

达到上述效果只需在方法2的基础上,把wxss的.dots、.dot、.active的样式替换成下面的即可,

此外，还有一种我们经常需要的效果：如下~

->那就是数字展示~

要达到上述这个效果，只需在方法2的基础上做如下修改即可：

第一、把wxml中的

 <view class="dot{{index == currentSwiper ? ' active' : ''}}"></view>

修改为

 <view class="dot{{index == currentSwiper ? ' active' : ''}}">{{index+1}}</view>

第二、把wxss的.dots、.dot、.active的样式替换成下面的即可;

/*用来包裹所有的小圆点  */
.dots{  width: 180rpx;height: 36rpx; display: flex;flex-direction: row;position: absolute;left: 300rpx;bottom: 20rpx;
}
/*未选中时的小圆点样式 */
.dot{  width: 32rpx;  height: 32rpx;   margin-right: 26rpx;background-color: yellow;border-radius: 50%;color: red;font-size: 26rpx;line-height: 32rpx;text-align: center;}
/*选中以后的小圆点样式  */
.active{  width: 32rpx;   height: 32rpx;background-color: coral;color: white;
}

好了，至于实现方法肯定很多，毕竟每个人的思路不同，这儿只是一个启发~下面顺便讲点好玩的->swiper的vertical属性，这个可以实现轮播的垂直滚动。

实现过程~

首先，在swiper开始组件里加vertical="{{vertical}}"，然后在js中将其设为true,表明垂直滚动，

然后在wxss中做下相应的样式改变，改变后的样式如下~


/*用来包裹所有的小圆点  */
.dots{    width: 180rpx;  height: 36rpx;   display: flex;  flex-direction: column;  position: absolute;  right:-80rpx;  bottom: 200rpx;
}
/*未选中时的小圆点样式 */
.dot{    width: 32rpx;    height: 32rpx;     margin-bottom: 20rpx;  background-color: yellow;  border-radius: 50%;  color: red;  font-size: 26rpx;  line-height: 32rpx;  text-align: center;  }
/*选中以后的小圆点样式  */
.active{    width: 32rpx;     height: 32rpx;  background-color: coral;  color: white;
}

最终效果：

详解微信小程序swiper小圆点默认样式改变相关推荐

小程序swiper修改指示点样式
小程序swiper修改指示点样式小程序修改swiper指示点样式,实在无法忍受网上乱七八糟,很简单,几行样式就可以了,整的那么麻烦,有那空,睡会儿他不香,翻到这个文章的就别再找了,我这就是你要的答案 ...
微信小程序 — 小程序反馈与建议功能及小程序button按钮去除默认样式
这节给大家讲解小程序反馈与建议功能的实现. 我们做小程序难免会遇到一些未知的问题,这个时候给用户提供一个反馈与建议功能就显得至关重要了.这一节来带领大家实现小程序的反馈与建议功能. 先看效果图还是 ...
关于微信小程序的image的默认样式
小程序的图片用的是标签,他默认的大小是宽320px,高240px.那我们如果用图片的话,肯定不能用默认的大小,那image常用的除了src属性之外,还有一个mode属性,他有4中缩放模式,9种剪裁模式 ...
微信小程序：去掉button默认样式
去除button默认样式: /* 去掉背景色和内外边距 */ button {margin: 0;padding: 0;background-color: inherit;position: stat ...
获取小程序各个组件的默认样式
参考链接: 小程序组件默认样式 component default style 微信开发者工具是用 NW.js 写的,编辑器使用 VSCode 团队开源的 monaco-editor 实现,模拟器和调 ...
修改小程序radio组件的默认样式
/* 默认背景样式*/ radio .wx-radio-input{width: 40rpx;height: 40rpx; }/* 选中后的背景样式 (红色背景无边框可根据UI需求自己修改) * ...
详解微信开放平台第三方平台代小程序开发业务基本接口调用逻辑
详解微信第三方小程序代开发微信申请第三方之后可以获取授权方的很多权限,主要的是生码和待开发,生码的第三方授权之前已经写了一篇文章,最近做了小程序待开发,总结一下写下来供大家参考由百牛信息技术bai ...
详解微信小程序开发（项目从零开始）
关注公众号风色年代(itfantasycc) 280G前端&小程序资料随便拿! 详解微信小程序开发(项目从零开始) 一.序微信小程序,估计大家都不陌生,现在应用场景特别多.今天就系统的介绍 ...
详解微信小程序页面间传递信息的三种方式
详解微信小程序页面间传递信息的三种方式在开发微信小程序的时候,经常会遇到在页面间传递信息的情况,有三种方法可以实现. 1. 使用数据缓存将要存储的数据使用以下方法放入缓存 wx.setStorag ...

详解微信小程序swiper小圆点默认样式改变

详解微信小程序swiper小圆点默认样式改变相关推荐

最新文章

热门文章