zoukankan      html  css  js  c++  java
  • wx小程序修改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: 2rpx;
    }
    .swiper-box .wx-swiper-dot{
        width:40rpx;
        display: inline-flex;
        height: 10rpx;
        margin-left: 20rpx;
        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(244,0,0,0.8);   
    }

    移动swiper的点到左下角 55555

    .wx-swiper-dots.wx-swiper-dots-horizontal{
       position: absolute;
       left: 0;
       transform: translateX(10rpx);  
    }
  • 相关阅读:
    hdu 4525(数学)
    hdu 4524(模拟)
    hdu 4523(大整数)
    hdu 4517(递推枚举统计)
    hdu 4520
    hdu 4519(数学题)
    hdu 4514(树的直径+并查集)
    hdu 4510(模拟)
    hdu 2089(数位DP)
    hdu 4506(数学,循环节+快速幂)
  • 原文地址:https://www.cnblogs.com/Mvloveyouforever/p/9007386.html
Copyright © 2011-2022 走看看