这是效果图。将默认的圆点变成短横线，当前活动的短横线较长并切是红色背景。以及轮播高度随着图片高度自适应。
代码如下：
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 /swiperjs：
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; }
