美文网首页
支付宝小程序实现swiper指示点自定义

支付宝小程序实现swiper指示点自定义

作者: 苏苏哇哈哈 | 来源:发表于2021-11-02 23:04 被阅读0次

1.实现效果

在这里插入图片描述

2.关键类名:

.a-swiper-indicator
.a-swiper-dot
.a-swiper-dot-active

3.实现代码

 <swiper class="swiper_box" indicator-dots="{{true}}" autoplay="{{true}}" interval="{{5000}}" duration="{{1000}}" circular="true">
  <swiper-item a:for="{{banner}}" a:key="index">
    <image bindtap="clickImg" src="{{item}}" mode="aspectFill"></image>
  </swiper-item>
</swiper>在这里插入代码片

swiper的高度自定义需要加!impoerant增加权重


```c
.swiper_box {
  width: 748rpx;
  height: 358rpx!important;
  overflow: hidden;
}
swiper-item image {
  width: 100%;
  height: 100%;
}
.swiper_box .a-swiper-indicator {
  margin-bottom: 14rpx;
}
.swiper_box .a-swiper-dot {
  margin-left: 5rpx;
  width: 12rpx;
  height: 12rpx;
  background: #FFF;
  border-radius: 50%;
}
.swiper_box .a-swiper-dot-active {
  width: 22rpx;
  height: 9rpx;
  border-radius: 4rpx;
  background: #F4D10A;
}

相关文章

网友评论

      本文标题:支付宝小程序实现swiper指示点自定义

      本文链接:https://www.haomeiwen.com/subject/mdxqzltx.html