这是效果图。将默认的圆点变成短横线，当前活动的短横线较长并切是红色背景。以及轮播高度随着图片高度自适应。
代码如下：
xml：
<swiper class='swiper-box' indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" style='height:{{Height}}'> <block wx:for="{{ bannerUrls }}"> <swiper-item> <view> <image class="slide-image" src="{{ item.url }}" bindload='imgHeight' mode='widthFix'></image> </view> </swiper-item> </block> </swiper>js：
Page({ data: { // 轮播 bannerUrls: [ { url: 'https://www.71big.com/heqing/zhaojingwang/common/images/banner1.jpg', linkUrl: '' }, { url: 'https://www.71big.com/heqing/zhaojingwang/common/images/banner1.jpg', linkUrl: '' }, { url: 'https://www.71big.com/heqing/zhaojingwang/common/images/banner1.jpg', linkUrl: '' } ], indicatorDots: true, autoplay: true, interval: 3000, duration: 1000, changeIndicatorDots: function (e) { this.setData({ indicatorDots: !this.data.indicatorDots }) }, changeAutoplay: function (e) { this.setData({ autoplay: !this.data.autoplay }) }, intervalChange: function (e) { this.setData({ interval: e.detail.value }) }, durationChange: function (e) { this.setData({ duration: e.detail.value }) }, //轮播结束 //轮播高度自适应――获取图片高度 imgHeight: function (e) { var winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度 var imgh = e.detail.height;//图片高度 var imgw = e.detail.width;//图片宽度 var swiperH = winWid * imgh / imgw + "px" this.setData({ Height: swiperH//设置高度 }) } })wxss：
/* 轮播 */ .slide-image{ width: 100%; } /* 轮播小点点 */ .swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal{ margin-bottom: 2rpx; } .swiper-box .wx-swiper-dot{ width:20rpx; display: inline-flex; height: 5rpx; margin-left: 10rpx; justify-content:space-between; } .swiper-box .wx-swiper-dot::before{ content: ''; flex-grow: 1; background: rgba(255,255,255,0.8); border-radius: 0rpx } .swiper-box .wx-swiper-dot-active::before{ background: #ff3333; } .swiper-box .wx-swiper-dot-active{ width:40rpx; }文章来源: 小程序――banner轮播