1.swiper的小圆点没有直接的属性更改位置
2.写代码的过程中无意中发现,可以通过设置swiper的小圆点的高度,至于左右暂时没发现。
3.具体实现
(1)效果图
(2)index.wxml中的代码
<!--首页banner轮播图-->
<view class='banner_view'>
<swiper class="swiper"
indicator-dots="{{indicatorDots}}"
indicator-color='white'
indicator-active-color='#2C2D80'
autoplay="{{autoplay}}"
interval="{{interval}}"
duration="{{duration}}"
current="{{swiperCurrent}}"
circular="{{circular}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}"
class="slide-image"
width="750"
height="324"/>
</swiper-item>
</block>
</swiper>
</view>
(3)index.wxss中的代码,通过改变line-height的值来实现位置的变更。
/* banner样式 */
.banner_view {
width: 100%;
height: 386rpx;
background-color: white;
line-height: 50rpx;/* 可以改变swiper上小圆点的位置 */
position: relative;
}
.swiper {
width: 100%;
height: 324rpx;
}
.slide-image {
width: 100%;
height: 100%;
}