uni-app 自定义轮播图 swiper 指示点位置
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;
}
}
但是,上述设置指示点位置代码,测试显示只对h5和app生效,微信小程序没有效果
对于微信小程序,偶然发现了一个方法,亲测有效
.imgs {
padding:0 32rpx;
margin-top: 150rpx;
border-radius: 20rpx;
position: relative;
//设置line-height即可改变小程序端指示点的位置
line-height: 90rpx;
}
设置line-height即可改变小程序端指示点的位置,当然可能会影响imgs盒子中其他元素的行高,按需要设置即可
更多推荐
已为社区贡献8条内容
所有评论(0)