小程序——banner轮播

这是效果图。将默认的圆点变成短横线，当前活动的短横线较长并切是红色背景。以及轮播高度随着图片高度自适应。

代码如下：

xml：

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; 
}