UNI-APP_uni-app swiper轮播图自定义指示点样式-蒲公英云

UNI-APP_uni-app swiper轮播图自定义指示点样式

r囧r小猫 2022-10-17 06:00 1160阅读 0赞

在这里插入图片描述

<view class="swiper_cent">
   <swiper class='u-wrp-bnr' :indicator-dots='false' autoplay='true' interval='3000' duration='1000' circular='true' @change="swiperChange">
         <block v-for="(item,i) in swiper" :key="i" >
           <swiper-item>
             <image :src='item.src' class='u-img-slide' mode='aspectFill'></image>
           </swiper-item>
         </block>
       </swiper>
    <view class="swiper_zhishi">
        <view :class="swiperKey == i?'view_active':''" v-for="(item,i) in bnrUrl" :key="i"></view>
    </view>
</view>
export default { 
    data() { 
        return { 
            swiper:[            //轮播数据
                { src:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1529354343,4008095697&fm=26&gp=0.jpg'},
                { src:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1663879126,2733636093&fm=26&gp=0.jpg'},
            ],
            swiperKey:0,        //轮播位置
        }
    },
    onLoad() { 
    },
    methods: { 
        swiperChange(e){ 
            // console.log(e.detail);
            this.swiperKey = e.detail.current
        }
    }
}
.swiper_cent{ 
    display: flex;
    justify-content: center;
    border-radius:7rpx;
    position: relative;
    overflow: hidden;
}
.swiper_zhishi{ 
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    position: absolute;
    bottom: 15rpx; view{ 
        width: 29rpx;
        height: 4rpx;
        background: #FFFFFF;
        border-radius: 2rpx;
        margin-right: 13rpx;
        color: #000;
    }
    .view_active{ 
        background: #3192FE;
    }
}
.u-wrp-bnr { 
    width: 700rpx;
    height: 278rpx;
    display: block;
    background: #f0f0f0;
    border-radius:7rpx;
}
.u-img-slide { 
    width: 100%;
    height: inherit;
}