swiper 默认情况下,指示点都是显示在轮播图下边中间位置,我现在因为加入了每张轮播图的标题,这指示点在中间实在是碍事,想把它放在图片的右下边,看了官网有关swiper说明文档,并没有关于指示点显示位置的设置。请问如何设置?
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}" wx:key="item">
<swiper-item class='img-banner'>
<image id='{{item.ArticleID}}' src="{{item.ImgUrl}}" class="slide-image" bindtap='goToDetail'/>
<text>{{item.Title}}</text>
</swiper-item>
</block>
</swiper>
.img-banner text{
position: absolute;
top:115px;
left:10px;
color: #535353;
font-size:12px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.wx-swiper-dots {
position: relative;
left: unset !important;
right: 0;
}
.wx-swiper-dots.wx-swiper-dots-horizontal {
margin-bottom: -5rpx;
}
改一下UI设计不行吗?
3.2版本新增了indicator-alignment属性,设置数组 [1,1]就可以了
<swiper class="swiper" indicator-dots="true" indicator-alignment="{{[1,1]}}">
<swiper-item>
<view class="swiper-view">
<text>图片1</text>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-view">
<text>图片2</text>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-view">
<text>图片3</text>
</view>
</swiper-item>
</swiper>
自己模拟一个就行了