收藏
回答

swiper 设置指示点显示位置

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;

}


回答关注问题邀请回答
收藏

5 个回答

  • 2019-12-05

    .wx-swiper-dots {

      positionrelative;

      leftunset !important;

      right0;

    }

    .wx-swiper-dots.wx-swiper-dots-horizontal {

      margin-bottom-5rpx;

    }


    2019-12-05
    有用 8
    回复
  • 禾店短剧系统
    禾店短剧系统
    2021-06-15
    • 一种是隐藏官方的指示点即把 indicator-dots=“{{false}}”传入swiper组件,自己写小圆点指示器的样式,然后通过 bindchange 监听swiper变化,动态更新小圆点样式
    • 一种就是用原生小圆点的类名,更改样式来实现
    2021-06-15
    有用 3
    回复
  • 老张
    老张
    2019-07-20

    改一下UI设计不行吗?

    2019-07-20
    有用 1
    回复 3
    • 往事如风
      往事如风
      2019-07-20
      已经解决了,把原有的指示点去了,自定义放指示点上去,配合bindchange就实现了
      2019-07-20
      1
      回复
    • 老张
      老张
      2019-07-21
      好吧,还是佩服这种执着精神的。
      2019-07-21
      回复
    • 果然
      果然
      2019-08-20回复往事如风
      尝试bindchange自定义确实很方便实现
      2019-08-20
      回复
  • ZJX
    ZJX
    2019-07-20
    饿了2 52给
    2019-07-20
    有用
    回复
  • 鲤子
    鲤子
    2019-07-20

    自己模拟一个就行了

    2019-07-20
    有用
    回复 1
    • 往事如风
      往事如风
      2019-07-20
      嗯,正在进行。。。
      2019-07-20
      回复
登录 后发表内容