如何自定义微信小程序swiper轮播图面板指示点的样式
2024-10-11 00:04:55
https://www.cnblogs.com/myboogle/p/6278163.html
微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很多样式是固定的,但是,有时候我们的设计稿的面板指示点是需要个性化的,那么如何去修改swiper组件的面板指示点的样式呢?最近在使用swiper的时候也在想这个,最后发现在调试的时候,可以看到他的选择器。如图:
<
swiper
class="swiper-box" indicator-dots="{{ indicatordots }}" autoplay="{{ autoplay }}">
<
block
wx:for="{{ swiperItem }}">
<
swiper-item
>
<
navigator
url="{{ item.linkUrl }}">
<
image
class="slide-image" src="{{ item.imgUrl }}"></
image
>
</
navigator
>
</
swiper-item
>
</
block
>
</
swiper
>
.swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal{
margin-bottom
:
2
rpx;
}
.swiper-box .wx-swiper-dot{
width
:
40
rpx;
display
: inline-flex;
height
:
10
rpx;
margin-left
:
20
rpx;
justify-
content
:space-between;
}
.swiper-box .wx-swiper-dot::before{
content
:
''
;
flex-grow:
1
;
background
: rgba(
255
,
255
,
255
,
0.8
);
border-radius:
8
rpx
}
.swiper-box .wx-swiper-dot-active::before{
background
:rgba(
244
,
0
,
0
,
0.8
);
}
最新文章
- 手把手教你玩转nginx负载均衡(三)----配置虚拟服务器网络
- SQL Server存储过程多角度介绍
- iOS蓝牙开发(二)蓝牙相关基础知识
- Html一天入门
- C# 面试宝典
- urllib编码
- ios7 UITableView 分割线在 使用selectedBackgroundView 选中时有些不显示
- HT全矢量化的图形组件设计
- Scala学习——数组/映射/元组
- XFS:大数据环境下Linux文件系统的未来?
- 容器 SET part2
- 信号和槽有一个非常精炼的C++实现,作者是Sarah Thompson,该实现只有一个头文件sigslot.h,跨平台且线程安全
- Android网络编程http派/申请服务
- Delphi 获取内存及CPU信息的函数
- Zeromq自连接错误
- 深圳市共创力咨询CEO杨学明的最新演讲:互联网模式下的企业创新管理
- SQL Server数据库设置自动备份策略
- [03] Spring "Hello World"
- Web 文件上传 目录
- react native中Unable to load script from assets &#39;index.android.bundle&#39;解决方案
热门文章
- 教你一些Linux中隐藏bash历史命令的小技巧
- Python3使用tkinter编写GUI程序
- 自己设计一个日期类,可以输入年月日作为构造时的参数,如果不使用参数,则设定为1900年1月1日;编写一个方法equals判断两个日期是否相等;另一个方法compareTo可以进行日期之间的比较,返回两个日期之间相差的天数.
- Hive JDBC:Permission denied: user=anonymous, access=EXECUTE, inode=”/tmp”
- 自研后端HTTP请求参数验证器服务ParamertValidateService
- R语言入门 :基本数据结构
- UWP ListView 绑定 单击 选中项 颜色
- WPF绑定文本时使用指定格式文本
- 洛咕 P3706 [SDOI2017]硬币游戏
- Linux 入门记录:十二、Linux 权限机制