微信小程序swiper小程序轮播图小圆点样式修改

微信小程序swiper小程序轮播图小圆点样式修改<swiperclass=”swiper-box”indicator-dots=”{{indicatordots}}”autoplay=”{{autoplay}}”><blockwx:for=”{{swiperItem}}”><swiper-item><navigatorurl=”{{item.linkUrl}}”><imageclass=

大家好,又见面了,我是你们的朋友全栈君。

<swiper class="swiper-box" indicator-dots="{
  
  {true}}" autoplay="{
  
  {true}}" circular="{
  
  {true}}">
  <block wx:for="{
  
  {['red', 'blue', 'purple']}}" wx:key="*this">
    <swiper-item style="background-color: {
  
  {item}}">
      <view class="swiper-item {
  
  {item}}"></view>
    </swiper-item>
  </block>
</swiper>


.swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal{
  margin-bottom: 20rpx;
}

.swiper-box .wx-swiper-dot{
 width:40rpx;
 height: 10rpx;
 margin-left: 0 10rpx;
 
 display: inline-flex;
 justify-content:space-between;
}

.swiper-box .wx-swiper-dot::before{
 content: '';
 flex-grow: 1; 
 background: rgba(255,255,255,0.8);
 border-radius: 8rpx
}

.swiper-box .wx-swiper-dot-active::before{
 background:rgba(255,255,255,1);   
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/143620.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长

相关推荐

  • Java异常的深入研究与分析

    Java异常的深入研究与分析

    2022年3月5日
  • mysql前缀索引语句_mysql 前缀索引

    mysql前缀索引语句_mysql 前缀索引联合索引概念联合索引又叫复合索引,即一个覆盖表中两列或者以上的索引,例如:index_name(columna,columnb)1创建方式执行altertable语句时创建altertabletable_nameaddindexindex_name(column_list)1index_name是创建的联合索引的名字,可以没有,没有的话系统会根据该索引包含的第一列来赋名称;tabl…

    2022年5月10日
  • java 设置环境变量

    java 设置环境变量安装JDK向导进行相关参数设置。如图:正在安装程序的相关功能,如图:选择安装的路径,可以自定义,也可以默认路径。如图:成功安装之后,进行测试是否真的成功安装,点击【开始】—-【运行】—-输入CMD,在命令提示符里面输入“Java-version”并按回车键,出现下图,即为安装成功。如图:下面开始配置环境变量,右击【我的电脑】

    2022年5月11日
  • silverlight 播放器,丑丑版

    silverlight 播放器,丑丑版

    2021年8月12日
  • Pytest(8)parametrize参数化「建议收藏」

    Pytest(8)parametrize参数化「建议收藏」前言当某个接口中的一个字段,里面规定的范围为1-5,你5个数字都要单独写一条测试用例,就太麻烦了,这个时候可以使用pytest.mark.parametrize装饰器可以实现测试用例参数化。官方示

    2022年7月29日
  • html 中 超链接的写法,网页超链接样式的CSS写法「建议收藏」

    html 中 超链接的写法,网页超链接样式的CSS写法「建议收藏」上一篇文章讲了母栏目后面两行子栏目的DIV布局,这篇文章讲导航做完之后我想在鼠标移到每个不同区域的超链接在颜色上给予变化。上图所示上上一篇文章的大概样式,颜色就不一一举例了,我现在现在是给了“男士”“女士”“养生”三个母栏目不同的颜色,为了好看一点,我想鼠标移动到“男士”后面的子栏目上面的颜色和“男士”的字体颜色一样,移到“女士”其后面的子栏目的超链接与“女士”的超链接颜色一样,“养生”同样的。先…

    2022年7月19日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号