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

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

![在这里插入图片描述][20210602103515503.png]

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;
    }

[20210602103515503.png]: /images/20221014/6e368cd6bd3d43e3b3c46064d18e9e77.png