uni-app 自定义轮播图 swiper 指示点位置
项目需要把指示点位置上移,否则会被按钮遮盖
<view class="imgs"> <swiper class="swiper screen-swiper square-dot" style="height: 634rpx;width: 686rpx;border-radius: 20rpx;z-index: -1;" indicator-dots autoplay :interval="5000" :duration="500"> <swiper-item v-for="(item, index) in indexInfo.banner" :key="index"> …… </swiper-item> </swiper> </view>
//设置轮播的指示点位置 .swiper { /deep/ .uni-swiper-dots { // 指示点整个区域 // bottom: 100rpx; } }
.imgs { padding:0 32rpx; margin-top: 150rpx; border-radius: 20rpx; position: relative; //设置line-height即可改变小程序端指示点的位置 line-height: 90rpx; }
设置line-height即可改变小程序端指示点的位置,当然可能会影响imgs盒子中其他元素的行高,按需要设置即可
上一篇:
uniapp开发微信小程序-2.页面制作