E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

在微信小程序中,轮播图上的小圆点默认样式为黑灰色,这在视觉体验上不是很惊艳眼球,有时达不到我们的需求。那么,怎样进行默认样式的改变呢?需要准备的东西: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/swiperwxss代码.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  /viewwxss代码/*其实,正常情况下,没必要加.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;  }    最终效果:

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 详解微信小程序swiper小圆点默认样式改变
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏